/* ============================================================
   MOOSE SIGHTINGS — the field journal (page-turning sketchbook)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&display=swap');

:root{
  --hand:'Caveat',cursive;
  --page-w:560px;
  --page-h:720px;
  --board:#254A3F;
}

.journal-stage{
  padding:clamp(24px,4vw,56px) 0 clamp(60px,7vw,100px);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(47,93,80,.09), transparent 62%),
    var(--paper-warm);
  position:relative;overflow:hidden;
}

.journal{
  position:relative;z-index:3;
  width:min(1160px,94vw);
  margin-inline:auto;
  perspective:2600px;
  perspective-origin:50% 42%;
}

/* the physical book */
.book{
  position:relative;
  width:100%;
  aspect-ratio:1120/720;
  transform-style:preserve-3d;
}

/* back board + shadow under everything */
.book-board{
  position:absolute;inset:-10px -14px -16px;
  border-radius:6px 14px 14px 6px;
  background:linear-gradient(135deg,#2E5A4C,#1C3A31);
  box-shadow:0 44px 80px -34px rgba(16,34,29,.62), 0 10px 30px rgba(16,34,29,.2);
}
.book-board::after{
  content:"";position:absolute;inset:10px 14px 16px;border-radius:4px 10px 10px 4px;
  border:1px solid rgba(200,163,107,.28);
}
/* left-hand inside board, visible before any page is turned */
.book-inside{
  position:absolute;left:0;top:0;width:50%;height:100%;
  border-radius:4px 0 0 4px;
  background:
    linear-gradient(90deg,rgba(0,0,0,.22),transparent 16%),
    linear-gradient(160deg,#2B564A,#1D3C33);
  overflow:hidden;
}
.book-inside .plate{
  position:absolute;inset:14% 12% auto 12%;text-align:center;color:rgba(248,246,242,.9);
}
.book-inside .plate .em{width:88px;height:88px;margin:0 auto 18px}
.book-inside .plate h3{color:#F3EEE3;font-size:1.35rem;margin-bottom:.35rem}
.book-inside .plate p{font-family:var(--hand);font-size:1.28rem;color:var(--tan-light);line-height:1.45}
.book-inside .plate .rule{width:70px;height:1px;background:rgba(200,163,107,.5);margin:16px auto}
.book-inside .plate small{
  display:block;margin-top:22px;font-family:var(--display);font-size:.62rem;letter-spacing:.24em;
  text-transform:uppercase;color:rgba(200,163,107,.75);
}

/* page stack edge on the right */
.book-edge{
  position:absolute;right:-6px;top:8px;bottom:8px;width:10px;border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg,#EFEADF 0 2px,#DCD5C5 2px 4px);
  box-shadow:2px 0 6px rgba(16,34,29,.18);
}

/* ---------- sheets ---------- */
.sheet{
  position:absolute;top:0;left:50%;width:50%;height:100%;
  transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.55,.05,.25,1);
}
.sheet.flipped{transform:rotateY(-180deg)}

.page{
  position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  overflow:hidden;
  background:
    radial-gradient(120% 100% at 0% 50%, rgba(120,100,64,.10), transparent 34%),
    #FBFAF6;
  padding:clamp(20px,2.6vw,38px) clamp(20px,2.8vw,40px);
  display:flex;flex-direction:column;
}
.page.front{border-radius:0 4px 4px 0;box-shadow:inset 14px 0 26px -18px rgba(16,34,29,.5)}
.page.back{
  transform:rotateY(180deg);border-radius:4px 0 0 4px;
  background:
    radial-gradient(120% 100% at 100% 50%, rgba(120,100,64,.10), transparent 34%),
    #FBFAF6;
  box-shadow:inset -14px 0 26px -18px rgba(16,34,29,.5);
}
/* paper grain + faint grid on every page */
.page::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(47,93,80,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(47,93,80,.07) 1px,transparent 1px);
  background-size:26px 26px;
}
.page > *{position:relative;z-index:1}

/* ---------- cover ---------- */
.page.cover{
  background:linear-gradient(150deg,#2F5D50,#1B3931 62%,#16302A);
  color:#F3EEE3;align-items:center;justify-content:center;text-align:center;
  border-radius:0 6px 6px 0;
}
.page.cover::before{
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='620' viewBox='0 0 620 620'%3E%3Cg fill='none' stroke='%23C8A36B' stroke-opacity='.22' stroke-width='1.1'%3E%3Cpath d='M-40 300c90-70 190-40 260 20s150 90 250 40 160-30 210 20'/%3E%3Cpath d='M-40 355c95-72 196-42 268 18s152 92 254 42 162-32 214 22'/%3E%3Cpath d='M-40 410c100-74 202-44 276 16s154 94 258 44 164-34 218 24'/%3E%3Cpath d='M-40 130c70-52 158-30 224 26s134 76 226 34 150-24 200 20'/%3E%3Cpath d='M-40 520c108-78 214-48 292 14s158 98 264 48'/%3E%3C/g%3E%3C/svg%3E");
  background-size:620px;
}
.cover-frame{
  border:1.5px solid rgba(200,163,107,.55);border-radius:4px;
  padding:clamp(26px,4vw,52px) clamp(20px,3vw,38px);width:86%;
}
.cover .em{width:clamp(70px,9vw,104px);height:auto;margin:0 auto clamp(14px,2vw,22px)}
.cover h2{color:#F6F2E9;font-size:clamp(1.5rem,3.1vw,2.35rem);letter-spacing:.02em;margin-bottom:.25em}
.cover .sub{
  font-family:var(--display);font-weight:700;font-size:.66rem;letter-spacing:.32em;
  text-transform:uppercase;color:var(--tan);margin-bottom:1.4rem;
}
.cover .hand{font-family:var(--hand);font-size:clamp(1.1rem,1.9vw,1.5rem);color:#DCD2BE;line-height:1.4}
.cover .owner{
  margin-top:clamp(20px,3vw,34px);padding-top:1rem;border-top:1px solid rgba(200,163,107,.3);
  font-family:var(--display);font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(243,238,227,.62);
}

/* ---------- notes page (left) ---------- */
.pg-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  border-bottom:1.5px solid rgba(47,93,80,.22);padding-bottom:.7rem;margin-bottom:clamp(12px,1.6vw,20px)}
.pg-no{font-family:var(--display);font-weight:800;font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--orange)}
.pg-date{font-family:var(--hand);font-size:1.12rem;color:var(--moss)}
.pg-title{font-size:clamp(1.35rem,2.5vw,2rem);margin-bottom:.15em;line-height:1.06}
.pg-sub{font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--moss);margin-bottom:clamp(12px,1.6vw,18px)}

.field-block{margin-bottom:clamp(11px,1.5vw,17px)}
.field-block h4{
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);
  margin-bottom:.32em;display:flex;align-items:center;gap:.5em;
}
.field-block h4::after{content:"";flex:1;height:1px;background:rgba(217,121,43,.25)}
.field-block p{font-size:clamp(.78rem,1.02vw,.92rem);line-height:1.56;color:var(--charcoal-soft);margin:0}

.margin-note{
  font-family:var(--hand);font-size:clamp(1rem,1.5vw,1.3rem);color:var(--forest);
  transform:rotate(-1.4deg);line-height:1.32;margin-top:auto;padding-top:.9rem;
  border-top:1px dashed rgba(47,93,80,.28);
}
.margin-note::before{content:"\201C"}
.margin-note::after{content:"\201D"}

.specimen{
  display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;font-size:.7rem;
  border:1px dashed rgba(47,93,80,.3);border-radius:8px;padding:.7rem .85rem;
  margin-bottom:clamp(12px,1.6vw,18px);background:rgba(110,139,92,.06);
}
.specimen dt{font-family:var(--display);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--moss);font-size:.58rem;align-self:center}
.specimen dd{margin:0;color:var(--charcoal);font-weight:500}

/* ---------- plate page (right) ---------- */
.page.plate-page{justify-content:flex-start}
.plate-frame{
  position:relative;background:#fff;padding:9px 9px 0;border-radius:3px;
  box-shadow:0 14px 30px -14px rgba(16,34,29,.45),0 2px 6px rgba(16,34,29,.12);
  transform:rotate(-.7deg);margin:clamp(14px,2vw,26px) 0 clamp(12px,1.6vw,18px);
}
.plate-frame .shot{overflow:hidden;border-radius:2px;background:#111;aspect-ratio:16/10}
.plate-frame .shot > img,.plate-frame .shot > svg{
  width:100%;height:100%;object-fit:cover;object-position:top center;
}
.plate-frame .cap{
  font-family:var(--hand);font-size:clamp(.98rem,1.4vw,1.22rem);color:var(--charcoal-soft);
  text-align:center;padding:.42rem .5rem .6rem;line-height:1.3;
}
/* washi tape corners */
.tape{
  position:absolute;width:74px;height:24px;background:rgba(200,163,107,.55);
  border-left:1px dashed rgba(255,255,255,.5);border-right:1px dashed rgba(255,255,255,.5);
  box-shadow:0 1px 3px rgba(16,34,29,.16);
}
.tape.tl{top:-11px;left:-18px;transform:rotate(-32deg)}
.tape.tr{top:-11px;right:-18px;transform:rotate(32deg)}

.stamp{
  position:absolute;right:clamp(16px,2.4vw,30px);bottom:clamp(84px,10vw,118px);
  border:2.5px solid rgba(217,121,43,.5);color:rgba(217,121,43,.62);border-radius:5px;
  font-family:var(--display);font-weight:800;font-size:.6rem;letter-spacing:.16em;
  padding:.42em .7em;transform:rotate(-11deg);text-align:center;line-height:1.25;z-index:3;
  background:rgba(251,250,246,.35);
}
.stamp b{display:block;font-size:.72rem;letter-spacing:.2em}

.plate-actions{margin-top:auto;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}
.plate-actions .btn{font-size:.82rem;padding:.72em 1.25em}
.outcome{
  display:flex;gap:clamp(10px,1.4vw,18px);margin-bottom:clamp(12px,1.6vw,18px);flex-wrap:wrap;
}
.outcome div{flex:1 1 90px}
.outcome b{display:block;font-family:var(--display);font-weight:800;font-size:clamp(1.1rem,1.9vw,1.55rem);
  color:var(--forest);letter-spacing:-.03em;line-height:1}
.outcome span{display:block;font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--moss);margin-top:.3rem;font-weight:600}

/* ---------- unlogged / back cover ---------- */
.unlogged{align-items:center;justify-content:center;text-align:center}
.unlogged .sketch{width:min(62%,220px);margin:0 auto clamp(14px,2vw,22px);opacity:.65}
.unlogged h3{font-size:clamp(1.2rem,2.1vw,1.65rem);margin-bottom:.4em}
.unlogged p{font-size:.9rem;color:var(--charcoal-soft);max-width:34ch;margin-inline:auto}
.unlogged .hand{font-family:var(--hand);font-size:1.35rem;color:var(--moss);margin-top:1rem;transform:rotate(-1.5deg)}

.page.endcover{
  background:linear-gradient(150deg,#1B3931,#16302A);color:#F3EEE3;
  align-items:center;justify-content:center;text-align:center;
}
.page.endcover h3{color:#fff;font-size:clamp(1.35rem,2.5vw,2rem);max-width:16ch;margin-inline:auto}
.page.endcover p{color:rgba(243,238,227,.72);font-size:.92rem;max-width:32ch;margin:0 auto 1.5rem}

/* ---------- controls ---------- */
.book-controls{
  display:flex;align-items:center;justify-content:center;gap:clamp(10px,1.6vw,20px);
  margin-top:clamp(24px,3vw,38px);position:relative;z-index:4;
}
.pgbtn{
  width:52px;height:52px;border-radius:50%;border:1.5px solid var(--line-strong);background:var(--paper);
  display:grid;place-items:center;cursor:pointer;color:var(--forest-ink);
  transition:transform .3s var(--ease),background .3s,border-color .3s,opacity .3s;
}
.pgbtn:hover:not(:disabled){background:var(--forest);border-color:var(--forest);color:#fff;transform:translateY(-2px)}
.pgbtn:disabled{opacity:.32;cursor:not-allowed}
.pgbtn svg{width:20px;height:20px}
.pg-dots{display:flex;gap:9px;align-items:center}
.pg-dots button{
  width:9px;height:9px;padding:0;border-radius:50%;border:0;cursor:pointer;
  background:rgba(47,93,80,.26);transition:background .3s,transform .3s;
}
.pg-dots button[aria-current="true"]{background:var(--orange);transform:scale(1.4)}
.pg-hint{
  text-align:center;margin-top:.9rem;font-family:var(--display);font-size:.66rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--moss);opacity:.8;
}

/* hover affordance on the turnable corner */
.corner{
  position:absolute;right:0;bottom:0;width:88px;height:88px;cursor:pointer;z-index:5;border:0;padding:0;
  background:linear-gradient(315deg,rgba(200,163,107,.55) 0%,rgba(200,163,107,.16) 42%,transparent 43%);
  border-radius:0 0 4px 0;opacity:0;transition:opacity .35s var(--ease);
}
.page.front:hover .corner,.corner:focus-visible{opacity:1}

/* ---------- mobile: the book unbinds into a scroll of pages ---------- */
@media(max-width:900px){
  .journal{perspective:none}
  .book{aspect-ratio:auto;height:auto;display:flex;flex-direction:column;gap:16px;transform-style:flat}
  .book-board,.book-inside,.book-edge,.corner{display:none}
  .sheet{display:contents}
  .page{
    position:relative;inset:auto;transform:none!important;backface-visibility:visible;
    -webkit-backface-visibility:visible;border-radius:16px!important;height:auto;min-height:0;
    box-shadow:var(--sh)!important;padding:26px 22px;border:1px solid var(--line);
  }
  .page.cover,.page.endcover{border:0}
  /* align-self keeps the stamp its own size — as a flex child of the page it was
     stretching to the full column width */
  .stamp{position:static;transform:rotate(-2deg);display:inline-block;align-self:flex-start;margin-bottom:.9rem}
  .book-controls,.pg-hint{display:none}
  .margin-note{margin-top:1.2rem}
  .plate-frame{transform:none}
}

/* the site address in a plate header is a live link */
.pg-link{
  color:var(--forest);border-bottom:1px solid rgba(47,93,80,.35);transition:color .25s,border-color .25s;
}
.pg-link:hover{color:var(--orange);border-color:var(--orange)}

/* cover call to action */
.cover-open{margin-top:clamp(18px,2.6vw,30px)}
@media(max-width:900px){.cover-open{display:none}}

/* ---------- identity showcase on a case study ---------- */
/* Cream, not navy. The logos are navy and gold with a transparent background,
   so on the client's own #0D2440 the navy half of the artwork vanished. */
.identity-panel{background:var(--paper-warm);position:relative;overflow:hidden}
.identity-panel h2{color:#0D2440}
.identity-panel .lead{color:var(--charcoal-soft)}
.identity-panel .eyebrow{color:#9A7534}
.identity-grid{
  display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,34px);align-items:stretch;
}
@media(max-width:760px){.identity-grid{grid-template-columns:1fr;max-width:320px;margin-inline:auto}}
.identity-grid figure{
  margin:0;background:#fff;border:1px solid rgba(13,36,64,.13);
  border-radius:var(--r-lg);padding:clamp(20px,2.6vw,34px);text-align:center;
  display:flex;flex-direction:column;
  box-shadow:0 10px 30px -18px rgba(13,36,64,.35);
  transition:box-shadow .4s var(--ease),border-color .4s var(--ease),transform .4s var(--ease);
}
.identity-grid figure:hover{border-color:rgba(13,36,64,.3);transform:translateY(-3px);
  box-shadow:0 20px 44px -20px rgba(13,36,64,.4)}
/* One fixed stage per card. A 3.6:1 landscape lockup and a 1:1 circle both get
   the same room, so neither ends up looking like the runt of the set. */
.logo-box{flex:1;display:grid;place-items:center;min-height:clamp(130px,15vw,190px)}
.identity-grid img{max-width:100%;max-height:clamp(130px,15vw,190px);width:auto;height:auto;
  object-fit:contain;margin:0 auto}
.identity-grid figcaption{
  margin-top:1.4rem;font-family:var(--display);font-weight:700;font-size:.64rem;letter-spacing:.2em;
  text-transform:uppercase;color:#0D2440;
}

/* The plate page is a fixed-height sheet. Long Solution copy was pushing the
   buttons off the bottom, so the text block absorbs the slack and clamps,
   and the actions stay put. The full text lives on the entry page anyway. */
.page.plate-page{justify-content:flex-start}
.plate-page .plate-frame,
.plate-page .outcome,
.plate-page .pg-head,
.plate-page .plate-actions{flex:none}
.plate-page .field-block{
  flex:1 1 0;min-height:0;overflow:hidden;display:flex;flex-direction:column;
}
.plate-page .field-block p{
  display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;
  -webkit-line-clamp:5;
}
.plate-page .plate-actions{margin-top:.7rem}
@media(min-width:1100px){.plate-page .field-block p{-webkit-line-clamp:6}}
@media(max-width:900px){
  /* the book unbinds here, so nothing is height constrained any more.
     flex:1 1 0 has to be released too — the page is auto-height on mobile, so a
     zero-basis flex item collapsed to 0px and the Solution copy painted straight
     over the buttons underneath it. */
  .plate-page .field-block{display:block;overflow:visible;flex:none;min-height:auto}
  .plate-page .field-block p{display:block;overflow:visible;-webkit-line-clamp:none}
}

/* ---------- phone type scale ----------
   The journal type is sized down to fit two pages inside a fixed-ratio book.
   Once the book unbinds there is no height constraint, so nothing needs to be
   9-11px any more — several labels were below a comfortable reading size. */
@media(max-width:760px){
  .pg-no{font-size:.74rem}
  .pg-sub{font-size:.78rem;letter-spacing:.12em}
  .field-block h4{font-size:.72rem;letter-spacing:.16em}
  .field-block p{font-size:.95rem;line-height:1.6}
  .specimen{font-size:.85rem;gap:.35rem .8rem}
  .specimen dt{font-size:.68rem}
  .plate-cap,.plate-page .plate-actions{font-size:.85rem}
}