/* Campus Fiction: membership UI. Same paper, ink and red as the reader; Garamond only. */
:root{
  --cream:#FFF5DF; --paper:#FBF0DA; --ink:#2a1f14; --ink-soft:#4a3a2a; --muted:#7a6a56; --muted2:#6a5a48;
  --border:#b09a82; --border-soft:#c8b89a; --red:#C8351A; --red-deep:#a82a14;
  --hair:rgba(42,31,20,0.12);
}

/* Standalone pages share the reader's reset */
.cf-page *, .cf-page *::before, .cf-page *::after{ box-sizing:border-box; }
.cf-page{ margin:0; }
.cf-page ul{ margin:0; padding:0; }
.cf-page h1, .cf-page h2, .cf-page p, .cf-page dl, .cf-page dd{ margin-top:0; }
.cf-page dd{ margin-left:0; }

/* Buttons */
.cf-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  background:var(--red); color:var(--cream); border:1px solid var(--red-deep); border-radius:2px;
  padding:0.7rem 1.5rem 0.6rem; text-decoration:none; cursor:pointer;
  font-family:'EB Garamond',Georgia,serif; font-size:0.74rem; font-weight:700; letter-spacing:0.22em; text-transform:uppercase;
  transition:background-color .2s ease;
}
.cf-btn:hover{ background:var(--red-deep); }
.cf-btn[disabled]{ opacity:.55; cursor:default; }
.cf-btn.ghost{ background:transparent; color:var(--ink-soft); border-color:var(--border); }
.cf-btn.ghost:hover{ background:var(--paper); border-color:var(--ink-soft); color:var(--ink); }
.cf-btn.block{ width:100%; }
.cf-btn svg{ width:14px; height:14px; }
.cf-link{ background:none; border:none; padding:0; cursor:pointer; color:var(--muted); font:inherit; font-style:italic; text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--border-soft); }
.cf-link:hover{ color:var(--ink-soft); }
:where(.cf-btn,.cf-link,.cf-tile,.cf-input,button):focus-visible{ outline:2px solid var(--red); outline-offset:3px; }
.cf-tile:focus:not(:focus-visible){ outline:none; }

/* Inputs (16px so iOS doesn't zoom) */
.cf-input{
  width:100%; font-family:'EB Garamond',Georgia,serif; font-size:16px; color:var(--ink);
  background:var(--cream); border:1px solid var(--border); border-radius:2px; padding:0.7rem 0.85rem 0.6rem; outline:none;
}
.cf-input::placeholder{ color:var(--border); font-style:italic; }
.cf-input:focus{ border-color:var(--ink-soft); }
.cf-code{ letter-spacing:0.5em; text-align:center; font-size:1.4rem; }
.cf-error{ min-height:1.2em; color:var(--red); font-style:italic; font-size:0.92rem; margin-top:0.6rem; }
.cf-note{ color:var(--muted); font-style:italic; font-size:0.92rem; line-height:1.55; }

/* Homepage corner link */
.cf-corner{ position:absolute; top:1.6rem; right:4rem; display:flex; gap:1.6rem; align-items:baseline; z-index:5; }
.cf-corner a{ font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.cf-corner a:hover{ color:var(--ink); }
.cf-corner a.strong{ color:var(--red); font-weight:600; }
@media (max-width:720px){ .cf-corner{ right:1.5rem; top:1.2rem; gap:1.1rem; } }

/* Tile state line + progress */
.cf-tile{ cursor:pointer; }
.cf-tile-state{ font-size:0.8rem; color:var(--red); font-style:italic; margin-top:0.15rem; font-variant-numeric:tabular-nums; }
.cf-tile-go{ font-size:0.7rem; letter-spacing:0.2em; text-transform:uppercase; color:var(--red); margin-top:0.35rem; }
.cf-tile:hover .cf-tile-go{ text-decoration:underline; text-underline-offset:3px; }
.cf-tile-progress{ height:2px; background:var(--hair); margin:-0.55rem 0 0.55rem; position:relative; }
.cf-tile-progress > i{ position:absolute; inset:0 auto 0 0; background:var(--red); }

/* Episode sheet: bottom sheet on phones, centered panel on desktop */
.cf-scrim{ position:fixed; inset:0; background:rgba(42,31,20,0.38); z-index:60; opacity:0; transition:opacity .25s ease; }
.cf-scrim.open{ opacity:1; }
.cf-sheet{
  position:fixed; z-index:61; background:var(--cream); color:var(--ink);
  left:0; right:0; bottom:0; max-height:88svh; overflow-y:auto; border-top:1px solid var(--border-soft);
  border-radius:10px 10px 0 0; padding:0 0 calc(1.6rem + env(safe-area-inset-bottom,0px));
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
.cf-sheet.open{ transform:none; }
.cf-sheet .grab{ position:absolute; top:8px; left:50%; transform:translateX(-50%); z-index:2; width:38px; height:4px; border-radius:2px; background:rgba(42,31,20,0.35); }
@media (min-width:760px){
  .cf-sheet{ left:50%; top:50%; bottom:auto; right:auto; width:min(560px,92vw); max-height:86vh; border:1px solid var(--border-soft); border-radius:3px;
    transform:translate(-50%,-46%); opacity:0; transition:transform .28s ease, opacity .28s ease; }
  .cf-sheet.open{ transform:translate(-50%,-50%); opacity:1; }
  .cf-sheet .grab{ display:none; }
}
.cf-sheet-art{ aspect-ratio:16/9; max-height:34svh; width:100%; background:var(--paper); border-bottom:1px solid var(--border-soft); display:flex; align-items:center; justify-content:center; overflow:hidden; border-radius:10px 10px 0 0; }
@media (min-width:760px){ .cf-sheet-art{ border-radius:3px 3px 0 0; max-height:30vh; } }
.cf-sheet-art img{ width:100%; height:100%; object-fit:cover; }
.cf-sheet-art.portrait img{ width:auto; height:72%; object-fit:contain; }
/* Released episodes: a slow crossfade through the episode's illustrations, like an autoplaying trailer */
.cf-sheet-art.reel{ position:relative; display:block; }
.cf-sheet-art.reel > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transform:scale(1.04); transition:opacity .7s ease, transform 3s ease-out; }
.cf-sheet-art.reel > img.fit{ object-fit:contain; padding:4% 0; box-sizing:border-box; background:var(--paper); }
.cf-sheet-art.reel > img.on{ opacity:1; transform:scale(1); }
@media (prefers-reduced-motion:reduce){ .cf-sheet-art.reel > img{ transform:none !important; transition:opacity .6s ease; } }
.cf-sheet-body{ padding:1.2rem 1.6rem 0; }
.caps{ text-transform:uppercase; letter-spacing:0.12em; font-size:0.9em; }
.cf-live{ color:var(--red); font-variant-numeric:tabular-nums; margin-bottom:1rem; font-size:1.05rem; }
.cf-sheet-eyebrow{ font-size:0.72rem; letter-spacing:0.24em; text-transform:uppercase; color:var(--muted); }
.cf-sheet-title{ height:40px; margin:0.45rem 0 0.5rem; }
.cf-sheet-title img{ height:100%; width:auto; max-width:100%; object-fit:contain; object-position:left center; }
.cf-sheet-title.text{ height:auto; font-size:1.5rem; font-style:italic; font-weight:600; color:var(--ink-soft); }
.cf-sheet-meta .ord{ font-size:0.65em; vertical-align:top; }
.cf-sheet-meta{ color:var(--muted); font-size:0.95rem; margin-bottom:0.9rem; display:flex; justify-content:space-between; gap:1rem; }
.cf-sheet-summary{ font-size:1.08rem; line-height:1.55; margin-bottom:1.2rem; }
.cf-sheet-progress{ display:flex; align-items:center; gap:0.8rem; font-size:0.88rem; color:var(--muted); margin-bottom:1.2rem; }
.cf-sheet-progress .bar{ flex:1; height:2px; background:var(--hair); position:relative; }
.cf-sheet-progress .bar i{ position:absolute; inset:0 auto 0 0; background:var(--red); }
.cf-sheet-actions{ display:flex; flex-direction:column; gap:0.6rem; }
.cf-sheet-actions .row{ display:flex; gap:0.6rem; }
.cf-sheet-actions .row > *{ flex:1; }
.cf-sheet-foot{ margin-top:1rem; text-align:center; }
.cf-countdown{ font-variant-numeric:tabular-nums; }
.cf-close{ position:absolute; top:10px; right:12px; z-index:2; background:rgba(255,245,223,0.85); border-radius:50%; width:34px; height:34px; display:flex; align-items:center; justify-content:center; border:none; font-size:1.6rem; line-height:1; color:var(--muted); cursor:pointer; padding:4px 8px; }


/* Episode previews (upcoming episodes) */
.cf-previews{ display:flex; gap:0.6rem; overflow-x:auto; margin:0 -1.6rem 1.3rem; padding:0 1.6rem; scrollbar-width:none; }
.cf-previews::-webkit-scrollbar{ display:none; }
.cf-previews img{ height:150px; width:auto; flex:0 0 auto; border:1px solid var(--border-soft); }

/* Standalone pages (subscribe, login, welcome, account, admin) */
.cf-page{ min-height:100svh; background:var(--cream); color:var(--ink); font-family:'EB Garamond',Georgia,serif; -webkit-font-smoothing:antialiased; }
.cf-top{ display:flex; justify-content:space-between; align-items:center; padding:1.6rem 4rem; }
.cf-top .seal{ width:120px; display:block; }
.cf-top .seal img{ width:100%; display:block; }
.cf-top nav a{ font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); text-decoration:none; margin-left:1.4rem; }
@media (max-width:720px){ .cf-top{ padding:1.2rem 1.5rem; } .cf-top .seal{ width:96px; } }
.cf-narrow{ max-width:440px; margin:0 auto; padding:2.5rem 1.5rem 5rem; }
.cf-h1{ font-size:clamp(2rem,6vw,2.8rem); font-weight:500; line-height:1.1; margin-bottom:1rem; letter-spacing:-0.01em; }
.cf-lede{ font-size:1.15rem; line-height:1.55; color:var(--ink-soft); margin-bottom:2rem; }
.cf-label{ display:block; font-size:0.72rem; letter-spacing:0.22em; text-transform:uppercase; color:var(--muted); margin-bottom:0.5rem; }
.cf-rule{ border:none; border-top:1px solid var(--hair); margin:2rem 0; }
.cf-foot{ text-align:center; font-size:0.7rem; letter-spacing:0.05em; color:var(--muted); padding:3rem 1rem; }

@media (prefers-reduced-motion:reduce){ .cf-sheet,.cf-scrim{ transition:none; } }

/* Inline sign-up (email, then code, in place) */
.cf-inline-row{ display:flex; width:100%; }
.cf-inline-row .cf-input{ border-radius:2px 0 0 2px; min-width:0; }
.cf-inline-row .cf-btn{ border-radius:0 2px 2px 0; white-space:nowrap; }
.cf-inline-row .cf-code{ letter-spacing:0.4em; text-align:center; }
.cf-inline-sent{ font-style:italic; color:var(--ink-soft); margin-bottom:0.6rem; line-height:1.5; }

/* Diluvio Universal links */
.dv{ color:inherit; text-decoration:none; } .dv:hover{ text-decoration:underline; text-underline-offset:2px; }