body{
  margin:0;
  background:#fbdfc6;
  font-family: antonio, sans-serif;
}


@font-face {
    font-family: Eyesome;
    src: url(../fonts/Eyesome\ Italic.otf);
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: handelson;
    src: url(../fonts/zhandelson-three.otf);
    font-weight: 400;
    font-style: normal;
}


@font-face {
    font-family: antoniobold;
    src: url(../fonts/Antonio-Bold.ttf);
    font-weight: 700;
    font-style: normal;
}

@font-face {
  font-family: antonio;
  src: url(../fonts/Antonio-Light.ttf);
}


@font-face {
  font-family: billie;
  src: url(../fonts/Billie\ Eilish.otf);
}

@font-face {
  font-family: billie2;
  src: url(../fonts/billie\ eilish.ttf);
}

@font-face {
  font-family: basic;
  src: url(../fonts/Basic\ Confident.otf);
}


@font-face {
  font-family: jelly;
  src: url(../fonts/Jelly-BF64e0b51d0ae27.otf);
}


@font-face {
  font-family: mogesty;
  src: url(../fonts/Mogesty-Regular.otf);
}


@font-face {
  font-family: fascinate;
  src: url(../fonts/Fascinate-Regular.ttf);
}

@font-face {
    font-family: kalste;
    src: url(../fonts/Kalste.otf);
}

@font-face {
    font-family: kglovin;
    src: url(../fonts/KGLovinOnMe.otf);
}

@font-face {
    font-family: cloudy;
    src: url(../fonts/Cloudy-June.ttf);
}

@font-face {
    font-family: mutalis;
    src:url(../fonts/MutalisFashion_PERSONAL_USE_ONLY.otf);
}


.site-header{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  padding:18px;
  z-index:10;
}

.header{
  display:flex;
  align-items:center;
}

.header-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.header-logo img{
  height:90px;
}

.logo-name{
  font-family:jelly;
  color:#b5b486;
}

@import url("assets/images/css/style.css");

:root{
  --bg: #fbddc6;
  --ink: rgba(60,60,60,0.85);
  --sage: rgba(108,118,85,0.85);
  --sage-soft: rgba(108,118,85,0.65);
  --paper: rgba(255,255,255,0.55);
  --border: rgba(0,0,0,0.10);
}

*{ box-sizing: border-box; }

html, body{ height: 100%; }

body{
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  overflow: hidden;
}


.recipes-wrap{
  height: 100vh;
  display: grid;
  place-items: center;
  padding: 90px 18px 24px;
}

.book-shell{
  width: min(980px, 92vw);
  position: relative;
}

.book-toggle{ position: absolute; left: -9999px; }

.book-cover{ display: block; }
.book-open{ display: none; }

#bookToggle:checked ~ .book-shell .book-cover{ display: none; }
#bookToggle:checked ~ .book-shell .book-open{ display: block; }


.book-cover{
  width: min(520px, 86vw);
  margin: 0 auto;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: 0 18px 55px rgba(0,0,0,0.12);
  cursor: pointer;
  position: relative;
}

.book-cover img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}


.cover-open{
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: antonio, system-ui, sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(60,60,60,0.70);
  background: rgba(255,255,255,0.55);
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,0.10);
}


.book-open{
  position: relative;
}


.book-close{
  position: absolute;
  top: -40px;
  right: 0;
  cursor: pointer;
  font-family: antonio, system-ui, sans-serif;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  font-size: 12px;
  color: rgba(60,60,60,0.60);
  padding: 6px 0;
}


.book-viewport{
  width: 100%;
  height: min(70vh, 640px);
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;

  border-radius: 26px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 55px rgba(0,0,0,0.10);
  background: rgba(255,255,255,0.22);
}


.spread{
  flex: 0 0 100%;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  scroll-snap-align: start;
  position: relative;
  background: rgba(255,255,255,0.32);
}


.spread::before{
  content:"";
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:1px;
  background: rgba(0,0,0,0.08);
}

.page{
  padding: 28px 26px;
  background: rgba(255,255,255,0.48);
  position: relative;
  overflow: hidden;
  height: 100%;
}


.page::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.03) 1px, transparent 1px);
  background-size: 100% 28px;
  opacity: 0.12;
  pointer-events:none;
}

.page > *{
    position: relative;

}


.page.left,
.page.right{
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.photo-slot{
  height: 220px;
  max-height: 220px;
  min-height: 0;
  width: 50%;
  border-radius: 18px;
  background: rgba(0,0,0,0.05);
  border: 1px solid rgba(0,0,0,0.10);
  overflow: hidden;
  margin: 0 0 16px;
  position: relative;
}

.photo-slot img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.recipe-name{
  margin: 0 0 12px;
  font-family: antoniobold, system-ui, sans-serif;
  font-size: 30px;
  color: rgba(83, 86, 74, 0.82);
  
}

.recipe-header{
  display: flex;
  align-items: flex-start;
  gap: 18px;
  margin-bottom: 16px;
}

.recipe-meta{
  flex: 1;
  min-width: 0;
}


.subhead{
  margin: 16px 0 8px;
  font-family: antonio, system-ui, sans-serif;
  font-size: 15px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sage-soft);
}

.ingredients{
  margin: 0;
  padding-left: 18px;
  line-height: 1.6;
  color: rgba(60,60,60,0.70);
  font-family: cloudy, system-ui, sans-serif;
  font-size: 25px;
  overflow-y: auto;
  min-height: 0;

  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 24px;
}


.ingredients li{
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  column-gap: 24px;
  flex: 1;
  padding-right: 10px;
}


.ingredients::-webkit-scrollbar{ width: 10px; }
.ingredients::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12); border-radius: 999px; }

.method{
  flex: 1;
  overflow-y: auto;
  padding-right: 10px;
  line-height: 1.65;
  color: rgba(60,60,60,0.72);
  font-family: cloudy, system-ui, sans-serif;
  font-size: 24px;
  min-height: 0;
}

.method ol{ margin: 0; padding-left: 18px; }


.book-tabs{
  position: absolute;
  top: 34px;
  right: -18px;
  display: grid;
  gap: 10px;
  z-index: 20;
}

.book-tabs .tab{
  display: block;
  text-decoration: none;
  font-family: antoniobold, system-ui, sans-serif;
  letter-spacing: 0.06em;
  font-size: 12px;
  color: rgba(108,118,85,0.85);

  background: rgba(251,237,225,0.95);
  border: 1px solid rgba(0,0,0,0.12);
  border-left: 0;
  border-radius: 0 14px 14px 0;
  padding: 10px 14px;
  min-width: 120px;
  box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.book-tabs .tab:hover{ transform: translateX(-2px); }


.book-viewport::-webkit-scrollbar{ height: 10px; }
.book-viewport::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12); border-radius: 999px; }
.method::-webkit-scrollbar{ width: 10px; }
.method::-webkit-scrollbar-thumb{ background: rgba(0,0,0,0.12); border-radius: 999px; }


@media (max-width: 820px){
  body{ overflow: auto; }
  .book-viewport{ height: auto; overflow-x: hidden; }
  .spread{ grid-template-columns: 1fr; }
  .spread::before{ display:none; }
  .book-close{ position: static; display: inline-block; margin-bottom: 10px; }
  .book-tabs{
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow: auto;
    padding: 12px 0;
    right: auto;
  }
  .book-tabs .tab{
    border-left: 1px solid rgba(0,0,0,0.12);
    border-radius: 999px;
    min-width: auto;
    box-shadow: none;
  }
  .method{ height: auto; overflow: visible; }
}