/* 18 Coulant: the sketchbook of 01 Carnet de croquis, plus the cheese */
:root {
  --desk: #A69886;
  --page: #F7F1E5;
  --graphite: #4D4842;   /* pencil lines */
  --lead: #3B3631;       /* body text, 10:1 on the page */
  --tape: rgb(232 220 190 / 0.82);
  --hand: "Reenie Beanie", "Segoe Print", cursive;
}

body {
  background: var(--desk) url(art/desk.svg);
  color: var(--choc);
  font: 400 19px/1.55 var(--serif);
}
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- the book ---------- */
.book { position: relative; display: grid; gap: 44px; padding: 22px 24px 96px; }
.spread {
  position: relative; width: 100%; max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--page) url(art/paper.svg);
  border-radius: 5px 5px 3px 3px;
  box-shadow:
    0 1px 0 #ebe2d1, 0 3px 0 #f1e9da, 0 4px 0 #d9cdb9, 0 6px 0 #efe6d6, 0 7px 0 #d2c5b0,
    0 30px 50px -24px rgb(50 32 14 / 0.6), 0 2px 6px rgb(50 32 14 / 0.18);
}
/* gutter: shadow into the fold + stitching */
.spread::before {
  content: ""; position: absolute; inset: 0 auto 0 50%; width: 120px; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(80 58 34 / 0.07) 38%, rgb(80 58 34 / 0.2) 49.5%, rgb(255 255 255 / 0.35) 50.5%, rgb(80 58 34 / 0.07) 62%, transparent);
}
.spread::after {
  content: ""; position: absolute; top: 28px; bottom: 28px; left: 50%; width: 2px; margin-left: -1px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, transparent 0 26px, #8d7e6a 26px 40px);
  opacity: 0.75;
}
.page { position: relative; min-width: 0; padding: 60px 70px 60px 74px; }
.page--r { padding: 60px 74px 60px 70px; }
.spiral { display: none; }

/* the other language: a pencilled word in the top corner of the first page */
.lang { position: absolute; z-index: 5; top: 22px; left: 34px; padding: 6px 4px; font: 27px/1 var(--hand); color: var(--graphite); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.lang:hover { color: var(--choc); text-decoration-thickness: 2px; }

/* ---------- hero spread ---------- */
.spread--hero { min-height: min(860px, calc(100dvh - 44px)); }
.spread--hero .page--l { display: flex; flex-direction: column; justify-content: center; }
.spread--hero .page--r { display: grid; align-content: center; justify-items: center; gap: 262px; }

.brand { display: grid; justify-items: start; margin: 0; }
.construct { position: relative; display: grid; place-items: center; width: 330px; aspect-ratio: 1; margin: -34px 0 -6px -38px; }
.construct__lines { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--graphite); overflow: visible; }
.construct__marks { font: 22px var(--hand); fill: var(--graphite); opacity: 0.7; }
.brand__mark { position: relative; width: 60%; }
.brand__word { width: 340px; margin-top: -10px; mix-blend-mode: multiply; }

.pl { stroke-opacity: var(--o, 1); }
.pl--dash { stroke-dasharray: 0.012 0.009; }

.slogan { margin-top: 26px; font-style: italic; font-weight: 400; font-size: clamp(40px, 3.7vw, 56px); line-height: 1.06; letter-spacing: -0.012em; color: var(--choc); }
.lede { margin-top: 14px; max-width: 33ch; font-size: 20px; line-height: 1.5; color: var(--lead); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
  font: 600 18px/1 var(--serif); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap;
  border-radius: 255px 16px 225px 16px / 16px 225px 16px 255px;
  transition: transform 140ms var(--ease-out), background-color 160ms ease, box-shadow 160ms ease;
}
.btn--ink { background: #3B3631; color: #FBF6EC; box-shadow: 2px 3px 0 rgb(59 54 49 / 0.22); }
.btn--line { border: 2px solid #3B3631; color: #2E2A26; }
.btn:active { transform: scale(0.97); }
@media (hover: hover) {
  .btn--ink:hover { background: #29251f; box-shadow: 3px 4px 0 rgb(59 54 49 / 0.25); }
  .btn--line:hover { background: rgb(59 54 49 / 0.07); }
}
.insta { font-style: italic; color: var(--lead); text-decoration-thickness: 1px; text-underline-offset: 5px; }
.insta:hover { text-decoration-thickness: 2px; }

/* taped prints */
.taped { position: relative; margin: 0; padding: 9px; background: #FDFBF6; transform: rotate(var(--t, -1.5deg)); box-shadow: 0 1px 2px rgb(60 40 20 / 0.2), 0 16px 26px -16px rgb(60 40 20 / 0.5); }
.taped img { width: 100%; }
.taped__photo { position: relative; display: block; }
.taped--hero { --t: -1.6deg; width: min(100%, 590px); margin-top: 8px; }
.tape {
  position: absolute; z-index: 2; width: 116px; height: 32px; background: var(--tape);
  box-shadow: 0 1px 1px rgb(60 40 20 / 0.08);
  clip-path: polygon(3% 0, 97% 0, 100% 16%, 96% 33%, 100% 50%, 96% 67%, 100% 84%, 97% 100%, 3% 100%, 0 84%, 4% 66%, 0 50%, 4% 33%, 0 16%);
}
.tape--tl { top: -13px; left: -34px; transform: rotate(-34deg); }
.tape--tr { top: -12px; right: -34px; transform: rotate(31deg); }
.tape--br { bottom: -12px; right: -30px; transform: rotate(-28deg); }

/* pencil notes */
.note { position: absolute; z-index: 3; display: flex; align-items: flex-start; gap: 2px; font: 31px/1 var(--hand); color: var(--graphite); white-space: nowrap; }
.note > span { padding-top: 0.15em; }
.arrow { flex: none; width: 92px; height: 62px; color: var(--graphite); overflow: visible; }
.note--pate { right: -2%; bottom: calc(100% - 10px); }
.note--pate .arrow { margin-top: 10px; }

.note--bite { left: 84%; top: 10%; }
.note--bite .arrow { width: 70px; height: 48px; margin-top: 12px; }
.motion .note--bite > span { animation-delay: 1.1s; }
.study { position: relative; width: 310px; justify-self: start; margin: 0 0 0 -14px; color: var(--graphite); }
.study__svg { width: 100%; height: auto; overflow: visible; }
.note--repulgue { left: 5%; top: calc(100% - 4px); line-height: 0.95; align-items: flex-end; }
.note--repulgue .arrow { transform: scaleY(-1); margin-bottom: 14px; }
.note--file { left: calc(100% + 30px); top: -118px; line-height: 0.95; }
.note--file .arrow { width: 62px; height: 42px; margin-top: 16px; }

/* ---------- the cheese (app.js): two generated images, one under the real cheese of each half, only
   with .cheese-on. Each starts inside the real cheese of the photo (soft top edge, so there is no
   seam) and is stretched from the top by the scroll. Positions are percentages of the print. ---------- */
.coule { position: absolute; z-index: 1; top: 61%; pointer-events: none; display: none; }
.coule--l { left: 17%; width: 29%; aspect-ratio: 459 / 1024; }
.coule--r { left: 52%; width: 30.5%; aspect-ratio: 476 / 1024; top: 59%; }
.cheese-on .coule { display: block; }
.coule__cheese {
  position: absolute; inset: 0;
  filter: drop-shadow(2px 8px 7px rgb(58 36 14 / 0.32));
  -webkit-mask-image: linear-gradient(to bottom, transparent 3%, #000 12%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 3%, #000 12%), linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
.coule__img { width: 100%; height: 100%; transform-origin: 50% 0; transform: scaleY(var(--s, 0.07)); opacity: var(--o, 0); will-change: transform; }
/* the grease the cheese leaves in the paper: the same shape, a little wider, soaked in and blurred */
.coule__stain {
  position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 0;
  transform: scale(1.16, calc(var(--s, 0.07) * 1.03)); opacity: calc(var(--o, 0) * 0.3);
  filter: blur(7px) brightness(0.55) saturate(1.5);
  -webkit-mask-image: linear-gradient(to bottom, transparent 30%, #000 44%); mask-image: linear-gradient(to bottom, transparent 30%, #000 44%);
}
/* the note about the cheese is written when the cheese reaches it */
.cheese-on .note--file .pl { animation: none; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 0.6s var(--ease-out); }
.cheese-on .note--file .pl + .pl { transition-delay: 0.3s; }
.cheese-on .book .note--file > span { animation: none; opacity: 0; transition: opacity 0.4s ease; }
.cheese-on .note--file.is-on .pl { stroke-dashoffset: 0; }
.cheese-on .book .note--file.is-on > span { opacity: 1; }

/* ---------- generated props on the page: steam, crumbs, what is inside, the bitten empanada ---------- */
/* steam over the hot empanada: two wisps, a slow loop; still and faint without motion */
.steam { position: absolute; z-index: 1; left: 0; right: 0; bottom: 36%; height: 0; pointer-events: none; }
.steam img { position: absolute; bottom: 0; left: 20%; width: 25%; height: auto; opacity: 0.4; transform-origin: 50% 100%; }
.steam img + img { left: 55%; scale: -1 1; }
.motion .steam img { opacity: 0; animation: steam 7s ease-in-out 2.2s infinite; }
.motion .steam img + img { animation-duration: 8.5s; animation-delay: 4.4s; }
@keyframes steam {
  0% { opacity: 0; transform: translateY(12px) scaleY(0.9); }
  35% { opacity: 0.95; }
  100% { opacity: 0; transform: translateY(-30px) scaleY(1.08); }
}
.bite { position: absolute; z-index: 2; right: 3%; top: 104px; width: 46%; pointer-events: none; }
.bite__emp { width: 100%; height: auto; filter: drop-shadow(3px 10px 9px rgb(58 36 14 / 0.36)); }
.bite__crumbs { position: absolute; left: 38%; top: 74%; width: 50%; height: auto; filter: drop-shadow(1px 2px 2px rgb(58 36 14 / 0.28)); }
.story .bite { opacity: 0; translate: 40px 0; rotate: 5deg; transition: opacity 0.5s ease 0.15s, translate 0.8s var(--ease-out) 0.15s, rotate 0.8s var(--ease-out) 0.15s; }
.story .bite.is-in { opacity: 1; translate: 0 0; rotate: 0deg; }

/* ---------- carte spread ---------- */
.spread--carte .page { padding-top: 72px; padding-bottom: 80px; }
.carte-head { position: relative; }
.carte-head h2 { font-size: clamp(42px, 4vw, 60px); font-weight: 500; line-height: 1; letter-spacing: -0.015em; }
.underline { display: block; width: 260px; height: 18px; margin: 8px 0 0 -4px; color: var(--rust); }
.carte-intro { margin-top: 16px; font-size: 21px; color: var(--lead); max-width: 40ch; }
.margin-note { margin-top: 18px; max-width: 24ch; font: 29px/1.05 var(--hand); color: var(--graphite); transform: rotate(-2deg); transform-origin: left; padding-left: 18px; border-left: 2px solid rgb(77 72 66 / 0.45); }

.group { margin-top: 56px; }
.page--r .group:first-child { margin-top: 0; }
.group__title { display: inline-block; font: italic 600 28px/1.1 var(--serif); color: var(--choc); padding-bottom: 6px; background: linear-gradient(transparent calc(100% - 2px), rgb(77 72 66 / 0.55) 0) no-repeat 0 100% / 100% 100%; }
.group__list { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 30px; margin: 26px 0 0; padding: 0; list-style: none; }
.study-item { min-width: 0; position: relative; }
.spread--carte, .spread--trouver { overflow-x: clip; }
.study-item--big { grid-column: 1 / -1; }
.study-item--big .taped { width: 92%; }
.study-item .taped { padding: 7px; }
.study-item .tape { width: 84px; height: 26px; }
.study-item .tape--tl { left: -24px; top: -10px; }
.study-item .tape--br { right: -22px; bottom: -10px; }
.study-item__name { margin-top: 18px; font: 600 22px/1.2 var(--serif); color: var(--choc); }
.study-item--big .study-item__name { font-size: 26px; }
.study-item__desc { margin-top: 3px; font: italic 400 18px/1.35 var(--serif); color: var(--lead); }

/* ---------- trouver + footer (provisional, stage 2 redesigns) ---------- */
.spread--trouver .page { padding-top: 64px; padding-bottom: 72px; }
.spread--trouver h2 { font-size: clamp(36px, 3.4vw, 48px); font-weight: 500; line-height: 1.05; }
.addr { margin: 18px 0 22px; font-style: normal; font-size: 24px; line-height: 1.35; }
.facts { display: grid; gap: 10px; margin: 28px 0 0; }
.facts div { display: flex; gap: 12px; align-items: baseline; }
.facts dt { min-width: 110px; font-weight: 600; }
.facts dd { margin: 0; }
.pending { font: 28px/1 var(--hand); font-style: normal; color: var(--graphite); }
.format { margin-top: 24px; font-style: italic; color: var(--lead); }
.page--foot { display: grid; place-items: center; text-align: center; }
.foot { display: grid; justify-items: center; gap: 10px; }
.foot__logo { width: 190px; mix-blend-mode: multiply; }
.foot__slogan { font-style: italic; font-size: 24px; }
.foot__line { font-size: 17px; color: var(--lead); max-width: 34ch; }

/* ---------- signature: pencil construction, then ink, then tape ---------- */
.motion .pl { stroke-dasharray: 1; stroke-dashoffset: 1; animation: pl-draw 0.9s var(--ease-out) var(--d, 0s) forwards; }
.motion .pl--dash { stroke-dasharray: 0.012 0.009; stroke-dashoffset: 0; opacity: 0; animation: pl-fade 0.6s ease var(--d, 0s) forwards; }
.motion .construct__marks { opacity: 0; animation: pl-fade 0.5s ease 0.9s forwards; }
.motion .brand__mark, .motion .brand__word {
  -webkit-mask-image: linear-gradient(100deg, #000 45%, transparent 55%); mask-image: linear-gradient(100deg, #000 45%, transparent 55%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: ink 0.9s var(--ease-out) 0.6s forwards;
}
.motion .brand__word { animation-delay: 0.85s; }
.motion .taped--hero { opacity: 0; animation: tape-down 0.65s var(--ease-out) 1.05s forwards; }
.motion .taped--hero .tape { opacity: 0; animation: tape-on 0.3s var(--ease-out) 1.5s forwards; }
.motion .taped--hero .tape--tr { animation-delay: 1.6s; }
.motion .note > span { opacity: 0; animation: pl-fade 0.5s ease 2.1s forwards; }
.motion .note--repulgue > span { animation-delay: 2.6s; }
@keyframes pl-draw { to { stroke-dashoffset: 0; } }
@keyframes pl-fade { to { opacity: 1; } }
@keyframes ink { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes tape-down { from { opacity: 0; transform: translateY(-16px) rotate(-4.5deg) scale(1.015); } to { opacity: 1; transform: rotate(var(--t)); } }
@keyframes tape-on { from { opacity: 0; scale: 0.85; } to { opacity: 1; scale: 1; } }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .bite { position: relative; right: auto; top: auto; width: 64%; margin: 26px 0 30px auto; }
  .page, .page--r { padding: 52px 44px; }
  .construct { width: 250px; }
  .brand__word { width: 290px; }
  .study { margin-left: -40px; width: 300px; }
}

/* ---------- short laptop screens (1366 x 768): hero actions stay clear of the presentation panel ---------- */
@media (min-width: 861px) and (max-height: 860px) {
  .spread--hero .page--l { padding-top: 36px; padding-bottom: 80px; }
  .construct { width: 250px; margin: -26px 0 -4px -30px; }
  .brand__word { width: 290px; }
  .slogan { margin-top: 18px; }
  .ctas { margin-top: 22px; }
}

/* ---------- phone / small tablet: one page, wire spiral on top ---------- */
@media (max-width: 860px) {
  .book { padding: 10px 8px 88px; gap: 26px; }
  .spread { grid-template-columns: 1fr; border-radius: 3px; }
  .spread::before, .spread::after { display: none; }
  .spiral { display: block; position: absolute; z-index: 4; left: 0; right: 0; top: -14px; height: 40px; background: url(art/spiral.svg) repeat-x 6px 0 / 24px 40px; }
  .page, .page--r { padding: 40px 22px 36px; }

  .spread--hero { min-height: 0; display: flex; flex-direction: column; padding: 34px 22px 40px; }
  .spread--hero .page { display: contents; }
  .brand { order: 1; grid-template-columns: auto 1fr; align-items: center; justify-items: start; column-gap: 4px; }
  .construct { width: 160px; margin: -16px 0 -12px -24px; }
  .construct__marks, .note--bite { display: none; }
  .brand__word { width: min(200px, 100%); margin: 0; }
  .taped--hero { order: 5; width: 94%; align-self: center; margin: 44px 0 0; }
  .note--pate { display: none; }
  .slogan { order: 2; margin-top: 18px; font-size: clamp(32px, 9vw, 40px); }
  .lede { order: 3; font-size: 18px; margin-top: 10px; }
  .ctas { order: 4; margin-top: 20px; gap: 12px 14px; }
  .btn { min-height: 48px; padding: 0 20px; font-size: 17px; }
  .study { order: 6; width: 190px; margin: 232px 0 64px 0; align-self: flex-start; }
  .note--file { display: none; }
  .note--repulgue { left: 0; top: calc(100% - 2px); font-size: 24px; }
  .note--repulgue .arrow { width: 56px; height: 38px; }
  .note--repulgue .arrow { width: 64px; height: 44px; }

  .bite { position: relative; right: auto; top: auto; width: 82%; margin: 26px 0 30px auto; }
  .story .bite { translate: 0 24px; }
  .lang { top: 30px; left: auto; right: 16px; font-size: 24px; }
  .spread--carte .page { padding: 48px 22px 40px; }
  .spread--carte .page--r { padding-top: 0; }
  .group { margin-top: 44px; }
  .page--r .group:first-child { margin-top: 44px; }
  .group__list { gap: 30px 18px; }
  .study-item__name { font-size: 19px; margin-top: 14px; }
  .study-item--big .study-item__name { font-size: 23px; }
  .study-item__desc { font-size: 16.5px; }
  .study-item .tape { width: 64px; height: 22px; }
  .taped--hero .tape { width: 82px; height: 26px; }
  .taped--hero .tape--tl { left: -22px; top: -10px; }
  .taped--hero .tape--tr { right: -22px; top: -10px; }
  .margin-note { font-size: 26px; }
  .spread--trouver .page--r { padding-top: 0; }
}
@media (max-width: 360px) {
  .note--repulgue { font-size: 22px; }
  /* both buttons on one row: @empaluna then sits left of the presentation panel (320 x 640) */
  .ctas { column-gap: 10px; }
  .ctas .btn { padding: 0 14px; }
  .construct { width: 128px; }
  .brand__word { width: 160px; }
  .group__list { grid-template-columns: 1fr; }
}