/* Wrenval — 1:1 rebuild of the Canva site.
   Design canvas is 1425 units wide; every element is placed at its exact
   design coordinate and the whole canvas is scaled to the viewport. */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&display=swap');

:root{
  --cream:  #f5f3e7;
  --cream2: #f0eddd;
  --beige:  #e1dbd4;
  --blue:   #c8d1d9;
  --gray:   #d9d9d9;
  --green:  #7ed957;
  --ink:    #231f20;
}

*{ box-sizing: border-box; }

html{ scroll-behavior:smooth; }

html,body{
  margin:0;
  padding:0;
  background:#fff;
  color:#000;
  font-family:'Cinzel', serif;
}

.stage{
  width:100%;
  overflow:hidden;
  background:#fff;
}

.canvas{
  position:relative;
  width:1425px;
  left:50%;
  transform-origin: top center;
  transform: translateX(-50%);
}

.el{ position:absolute; }

img.el{ display:block; object-fit:contain; }

/* Outlined button: 3px frame, white face — border-box makes the inner
   face land on the exact inner rect measured from the original. */
.btn{
  border:3px solid var(--beige);
  background:#fefeff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Cinzel', serif;
  font-size:18.6667px;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
  cursor:pointer;
  padding:0;
}
.btn-thick{ border-width:8px; }
.btn:hover{ background:#f7f4ec; }

/* A writing/story page can run well past one screen, and the desktop canvas
   scrolls as one long transformed block - a "Back" placed at a canvas
   coordinate scrolls away with everything else. .back-fixed sits outside
   .canvas entirely (see the page templates) so position:fixed pins it to the
   real viewport instead of the scaled canvas, in real (unscaled) pixels. */
.back-fixed{
  display:none;
  position:fixed;
  top:24px;
  left:24px;
  z-index:50;
  width:403px;
  height:79px;
}
@media (min-width:901px){
  .back-fixed{ display:flex; }
}

.center{
  display:flex;
  align-items:center;
  justify-content:center;
}

.nav-link{
  font-size:21.3333px;
  font-weight:700;
  color:#000;
  background:#fff;
}
.nav-link:hover{ text-decoration:underline; }

.news-title{
  font-size:42.6667px;
  font-weight:700;
  line-height:59px;
  color:#000;
}

/* email capture */
.email-input{
  border:none;
  outline:none;
  background:#fff;
  font-family:'Cinzel', serif;
  font-size:29.3333px;
  font-weight:400;
  color:#000;
  padding:0 0 0 27px;
}
.email-input::placeholder{ color:#000; opacity:1; }
.email-input:focus::placeholder{ opacity:.35; }

/* The green button is a pill and is painted BENEATH the beige backing and
   white field, so only its right end shows — that is what creates the thin
   beige gap between the field and the button on the original. */
.email-go{
  background:var(--green);
  border:none;
  border-radius:999px;
  cursor:pointer;
  padding:0;
}

.arrow-ico{ pointer-events:none; }

/* About copy */
.about-copy{
  font-size:18.633px;
  font-weight:400;
  line-height:26px;
  color:#000;
}
.about-copy p{ margin:0 0 26px 0; }
.about-copy p:last-child{ margin-bottom:0; }

.about-heading{
  font-size:50.3127px;
  font-weight:700;
  line-height:70px;
  text-decoration:underline;
  white-space:nowrap;
  color:#000;
}

/* Writings list */
/* Lists that outgrow their panel scroll inside it instead of stretching the
   page. The track sits in the panel's right margin so it never covers an item. */
.scroll-list{
  position:absolute;
  overflow-y:auto;
  overflow-x:hidden;
  scrollbar-width:thin;
  scrollbar-color:var(--beige) transparent;
  overscroll-behavior:contain;
}
.scroll-list::-webkit-scrollbar{ width:8px; }
.scroll-list::-webkit-scrollbar-track{ background:transparent; }
.scroll-list::-webkit-scrollbar-thumb{
  background:var(--beige);
  border-radius:4px;
}

.news-item{
  flex:none;
  width:285px;
  height:60px;
  margin:0 0 18.75px 18px;
}
.news-item:last-child{ margin-bottom:0; }

.scroll-list .writing-card{
  position:relative;
  margin:0 0 29px 18px;
}
.scroll-list .writing-card:last-child{ margin-bottom:0; }

/* Panels carry their beige edge as an inset ring rather than a real border,
   so absolutely positioned children keep their exact design coordinates. */
.framed{ box-shadow: inset 0 0 0 5px var(--beige); }
.framed-8{ box-shadow: inset 0 0 0 8px var(--beige); }

.writing-card{
  background:#fff;
  border-radius:20px;
  box-shadow: inset 0 0 0 5px var(--beige);
  display:block;
  text-decoration:none;
  color:#000;
  position:absolute;
}
.writing-card:hover{ background:#fbfaf5; }
.writing-card .wt-title{
  position:absolute;
  left:32px; top:21px;
  font-size:29.3333px;
  font-weight:400;
  line-height:40px;
  text-decoration:underline;
}
.writing-card .wt-tag{
  position:absolute;
  left:32px; top:57px;
  font-size:21.3335px;
  font-weight:400;
  line-height:29px;
}
.writing-card .wt-arrow{
  position:absolute;
  left:315px; top:72px;
  width:27px; height:16px;
}

.inbox-label{
  font-size:21.9689px;
  font-weight:400;
  line-height:29px;
  color:#000;
}

.template-title{
  font-size:54.6672px;
  font-weight:700;
  line-height:73px;
  text-decoration:underline;
  color:#000;
}

/* Imported writing pages */
.wp-body{
  position:absolute;
  left:32px; top:120px;
  width:457px;
  font-size:20px;
  line-height:30px;
  color:#000;
}
.wp-body p{ margin:0 0 30px 0; }
.wp-body p:last-child{ margin-bottom:0; }
.wp-empty{ opacity:.55; }
.wp-body code{ font-family:inherit; }

/* Announcement / news pages */
.ann-title{
  font-size:42.6667px;
  font-weight:700;
  line-height:59px;
  text-decoration:underline;
  color:#000;
}
.ann-body{
  font-size:28px;
  font-weight:400;
  line-height:39px;
  color:#000;
}
/* Paragraphs flow inside the one positioned box - the gap between them is a
   real margin now, not a guessed offset. */
.ann-body p{ margin:0 0 39px 0; }
.ann-body p:last-child{ margin-bottom:0; }

.template-body{
  position:absolute;
  left:32px; top:120px;
  width:457px;
  height:530px;
  border:none;
  outline:none;
  background:transparent;
  resize:none;
  font-family:'Cinzel', serif;
  font-size:20px;
  line-height:30px;
  color:#000;
}

/* --- email signup ---------------------------------------------------------
   The honeypot field. ⚠️ NOT display:none and NOT type="hidden" - bots skip
   both. It is pushed out of sight and out of the tab order instead, so a
   person never meets it and a form-filling script still finds something to
   fill in. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* The line under the input that says what happened. It is empty until there
   is something to say, so it takes up no visual room on a fresh page.
   It is positioned to span the beige frame exactly, so centring here puts it
   on the same midpoint as the input box above it. */
.signup-status {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
  color: var(--ink);
  text-align: center;
}
.signup-status[data-state='error'] { color: #a3321e; }

.email-go[disabled] { opacity: .55; cursor: default; }

/* ===========================================================================
   MOBILE LAYOUT
   ---------------------------------------------------------------------------
   Above MOBILE_BREAK (900px, kept in sync with script.js) the site is the
   fixed 1425-unit design canvas, scaled to fit — unchanged, pixel for pixel.
   At or below it, the canvas is hidden and this ".mobile" layout takes over:
   real block/flex flow, content reflows to one column, images are fluid, and
   text sizes are picked to be readable at their natural (unscaled) size
   instead of shrinking with the rest of the page.
   ⚠️ MUST MATCH script.js's MOBILE_BREAK — see the comment there. */

.mobile{ display:none; }

@media (max-width: 900px){
  .stage{ display:none; }
  .mobile{ display:block; background:#fff; }
}

.m-wrap{
  max-width:36rem;
  margin:0 auto;
  padding:0 1.25rem;
  box-sizing:border-box;
}

.m-section-title{
  font-size:1.75rem;
  font-weight:700;
  text-decoration:underline;
  text-align:center;
  color:#000;
  margin:0 0 1.25rem 0;
}

/* header + nav */
.m-header{
  padding:1.5rem 1.25rem 1rem;
  text-align:center;
}
.m-logo{
  display:block;
  width:70%;
  max-width:280px;
  height:auto;
  margin:0 auto 1rem;
}
.m-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.5rem;
  list-style:none;
  margin:0;
  padding:0;
}
.m-nav a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:.5rem 1.1rem;
  font-family:'Cinzel', serif;
  font-size:1.05rem;
  font-weight:700;
  color:#000;
  text-decoration:none;
}
.m-nav a:hover, .m-nav a:active{ text-decoration:underline; }

/* hero */
.m-hero{
  background:var(--blue);
  padding:1.75rem 1.25rem;
  text-align:center;
}
.m-hero img{
  display:block;
  width:100%;
  max-width:340px;
  height:auto;
  margin:0 auto;
}

/* generic section rhythm */
.mobile section{ padding:2rem 0; }
.mobile section.m-hero{ padding:1.75rem 0; }

/* news list */
.m-news{ background:#fff; }
.m-news-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
}
.m-news-list a,
.m-news-list .is-soon{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.75rem;
  min-height:44px;
  border:3px solid var(--beige);
  background:#fefeff;
  padding:.85rem 1.1rem;
  font-family:'Cinzel', serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
}
.m-news-list a:hover, .m-news-list a:active{ background:#f7f4ec; }

/* about */
.m-about{ background:var(--cream); }
.m-about-copy{
  font-size:1rem;
  line-height:1.6;
  color:#000;
}
.m-about-copy p{ margin:0 0 1.1rem 0; }
.m-about-copy p:last-child{ margin-bottom:0; }
.m-about-copy br{ content:''; }

/* signup */
.m-signup{ background:var(--cream); text-align:center; }
.m-signup-form{ max-width:26rem; margin:0 auto; }
/* ⚠️ THIS IS THE DESKTOP FIELD, REBUILT AT PHONE SIZE - keep it that way.
   Desktop is a beige plate with a white field inset 9px inside it, and a green
   pill whose rounded right end pokes out PAST the plate onto the cream page.
   Same here: the beige plate is the input's own 9px border, so it stops at the
   field, and the green button sits flush against it with its rounded end on
   the cream. The row has no background, so there is no beige in the corners
   around the curve. */
.m-signup-row{
  display:flex;
  align-items:stretch;
  /* No beige on the row itself. The beige plate is the field's own 9px border
     (below), so it stops at the field and the button's rounded end sits on the
     page's cream, exactly like the desktop pill - no beige in its corners. */
  background:none;
  padding:0;
  gap:0;
}
.m-email-input{
  flex:1 1 auto;
  min-width:0;
  border:9px solid var(--beige);   /* this IS the beige plate around the field */
  border-radius:0;          /* square, like the plate it sits in */
  outline:none;
  background:#fff;
  background-clip:padding-box;
  font-family:'Cinzel', serif;
  font-size:1rem;
  color:#000;
  padding:0 1rem;
  min-height:70px;          /* 52px white + 9px plate above and below, as before */
}
.m-email-input::placeholder{ color:#000; opacity:.65; }
.m-email-go{
  flex:none;
  width:62px;
  margin:0;                    /* flush against the field's plate, same height as it */
  border:none;
  border-radius:0 999px 999px 0;
  background:var(--green);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}
.m-email-go svg{ width:26px; height:14px; display:block; }
.m-email-go[disabled]{ opacity:.55; cursor:default; }
.m-signup-status{
  margin:.85rem 0 0;
  font-size:1rem;
  line-height:1.3;
  color:var(--ink);
  text-align:center;
}
.m-signup-status[data-state='error']{ color:#a3321e; }
.m-bird{
  display:block;
  width:55%;
  max-width:240px;
  height:auto;
  margin:1.75rem auto 0;
}

/* shared: buttons, cards, panels used on writings / socials / news / writing pages */
.m-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  width:100%;
  max-width:22rem;
  margin:0 auto;
  box-sizing:border-box;
  border:3px solid var(--beige);
  background:#fefeff;
  font-family:'Cinzel', serif;
  font-size:1.05rem;
  font-weight:700;
  color:var(--ink);
  text-decoration:none;
}
.m-btn:hover, .m-btn:active{ background:#f7f4ec; }
.m-btn-thick{ border-width:6px; }

.m-panel{
  background:var(--cream);
  padding:1.75rem 1.25rem 2.5rem;
}

.m-art{
  display:block;
  width:100%;
  height:auto;
  max-height:240px;
  object-fit:cover;
}

.m-list{
  display:flex;
  flex-direction:column;
  gap:.85rem;
  margin:1.25rem 0;
}

.m-writing-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  border:3px solid var(--beige);
  background:#fff;
  padding:1rem 1.1rem;
  text-decoration:none;
  color:#000;
}
.m-writing-card:hover, .m-writing-card:active{ background:#fbfaf5; }
.m-writing-card .wt-title{
  display:block;
  font-size:1.1rem;
  font-weight:400;
  text-decoration:underline;
}
.m-writing-card .wt-tag{
  display:block;
  font-size:.9rem;
  font-weight:400;
  opacity:.8;
  margin-top:.2rem;
}
.m-writing-card .wt-arrow{
  flex:none;
  width:20px;
  height:12px;
}

.m-profile{
  display:block;
  width:55%;
  max-width:220px;
  height:auto;
  margin:2rem auto 1.5rem;
}

.m-title{
  font-size:1.6rem;
  font-weight:700;
  text-decoration:underline;
  text-align:center;
  color:#000;
  margin:0 0 1.25rem 0;
}

.m-body{
  font-size:1rem;
  line-height:1.6;
  color:#000;
}
.m-body p{ margin:0 0 1.1rem 0; }
.m-body p:last-child{ margin-bottom:0; }
.m-body-empty{ opacity:.6; }

.m-inbox-label{
  font-size:1.15rem;
  font-weight:400;
  text-align:center;
  color:#000;
  margin:0 0 1rem 0;
}

@media (max-width: 480px){
  .m-hero img{ max-width:260px; }
  .m-section-title, .m-title{ font-size:1.5rem; }
  .m-nav a{ font-size:1rem; padding:.5rem .85rem; }
}

/* --- "Coming Soon" placeholders -------------------------------------------
   Entries flagged comingSoon in content.json. They keep the frame of a real
   button so the panel still reads as a list, but they are spans rather than
   links: no pointer, no hover lift, no arrow, and slightly dimmed so the
   difference is visible before you try to tap one. */
.btn.is-soon,
.m-news-list .is-soon,
.writing-card.is-soon,
.m-writing-card.is-soon{
  cursor:default;
  opacity:.55;
}
/* A placeholder card must not react to the pointer the way a real one does. */
.writing-card.is-soon:hover,
.m-writing-card.is-soon:hover{ background:#fff; }
.btn.is-soon:hover{ background:#fefeff; }

/* Only phones around 320px wide: the field is ~160px, so trim its padding and the
   placeholder size so "example@email.com" is not clipped. The arrow stays to the
   right of the field. */
@media (max-width: 340px){
  .m-email-input{ padding:0 .6rem; }
  .m-email-input::placeholder{ font-size:.8rem; }
}