/* İnci Atrek — Components & sections (see docs/03-components.md) */

/* ============ HEADER ============ */
.site-header{background:var(--ia-white);position:relative;z-index:var(--z-header)}
.site-header__inner{padding-block:clamp(28px,4vw,48px) clamp(20px,3vw,32px);text-align:center}
.site-header__logo{display:inline-block}
.site-header__logo img{max-height:clamp(38px,4.4vw,64px);width:auto;margin-inline:auto}
.primary-nav{margin-top:clamp(18px,2.4vw,28px)}
.primary-nav__list{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:clamp(20px,4vw,64px)}
.primary-nav__list a{padding-bottom:4px;border-bottom:1px solid transparent}
.primary-nav__list .current-menu-item>a,
.primary-nav__list a[aria-current="page"]{border-bottom-color:var(--ia-green)}
.foreign-familiar{display:inline-flex;align-items:center}
.foreign-familiar img{max-height:clamp(40px,4vw,58px);width:auto}

/* Hamburger */
.nav-toggle{display:none;position:absolute;top:clamp(24px,4vw,44px);right:var(--gutter);
  width:34px;height:26px;flex-direction:column;justify-content:space-between;z-index:var(--z-menu)}
.nav-toggle span{display:block;height:2px;background:var(--ia-green);transition:transform .25s var(--ease),opacity .25s}
.nav-open .nav-toggle span:nth-child(1){transform:translateY(12px) rotate(45deg)}
.nav-open .nav-toggle span:nth-child(2){opacity:0}
.nav-open .nav-toggle span:nth-child(3){transform:translateY(-12px) rotate(-45deg)}

/* ============ FOOTER ============ */
.site-footer{background:var(--ia-green);color:var(--ia-on-dark)}
/* The footer bar spans the FULL viewport width (only the gutter as side margin), so the emblem
   sits near the left edge and instagram near the right edge — not boxed into the centered
   content column. Two equal-height columns: emblem/instagram on top, copyright/policy links
   share the SAME bottom baseline (matches the mockup). */
.site-footer__inner{max-width:none;display:flex;align-items:stretch;justify-content:space-between;
  gap:var(--sp-5);padding-block:clamp(28px,3vw,40px)}
.site-footer__left{display:flex;flex-direction:column;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.site-footer__emblem img{max-height:clamp(38px,3vw,48px);width:auto}
.site-footer__right{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:var(--sp-3)}
.site-footer__ig img{width:26px;height:26px}
.site-footer__ig svg{width:26px;height:26px;fill:var(--ia-on-dark)}
.policy-links{display:flex;gap:.5ch;flex-wrap:wrap;justify-content:flex-end}
.policy-links .sep{opacity:.7}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--ia-gold);
  color:var(--ia-white);padding:18px 30px;border-radius:var(--radius);transition:filter .15s var(--ease)}
.btn:hover{filter:brightness(.94)}
.btn--block{width:100%}

/* ============ HERO QUOTE (Home) ============ */
/* Banner mode: the GIF/image already contains the typeset quote — show it full-width. */
.hero-quote--banner{background:var(--ia-greige);line-height:0}
.hero-quote--banner img{width:100%;height:auto;display:block}
/* Overlay mode: the (text-free) banner is a full-bleed COVER background so it always fills
   the band edge-to-edge (no letterbox), with the live, editable quote layered on the left. */
.hero-quote{position:relative;background-color:#a2a29e;background-repeat:no-repeat;
  background-position:center right;background-size:cover;overflow:hidden;
  min-height:clamp(360px,33vw,470px);display:flex;align-items:center}
.hero-quote__inner{position:relative;width:100%;max-width:var(--wrap);margin-inline:auto;
  padding-inline:var(--gutter)}
.hero-quote__text{max-width:min(560px,70%)}
/* Responsive GIF slider: the picture element selects desktop or mobile artwork. */
.hero-quote.hero-quote--slider{display:block;min-height:0;background:var(--ia-greige);line-height:0}
.hero-slider{width:100%;overflow:hidden}
.hero-slider picture,.hero-slider img{display:block;width:100%}
.hero-slider img{height:auto}

/* ============ BOOK FEATURE ============ */
/* Mockup ratio: cover ~34% of the content column. The content column stretches to the cover's
   height and the CTA is pinned to the bottom (margin-top:auto), so ORDER NOW always lines up
   with the cover's lower edge no matter how the description wraps at any screen width. */
/* Cover ~34% of the (centered) content column, text fills the rest — the whole book block
   spans the shared content width so it lines up with every other section. The content column
   stretches to the cover height and the CTA is pinned to its bottom, keeping ORDER NOW aligned
   with the cover's lower edge. */
.book{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);
  gap:clamp(28px,3vw,44px);align-items:stretch}
.book__cover img{width:100%;height:auto}
.book__content{max-width:none;display:flex;flex-direction:column}
.book__awards{margin-bottom:1.1rem}
.book__awards .t-award{display:block}
.book__awards .t-award+.t-award{margin-top:.375rem}
.book__blurb{margin-bottom:.8rem}
/* Book description ~0.875rem Lora, line-height 1.25 (mockup measured 14px @ ref width). */
.book__desc{font-size:.875rem;line-height:1.25}
.book__desc>*+*{margin-top:.9rem}
.book__cta{margin-top:auto;padding-top:1.25rem}
.book__cta .btn{padding-block:.9rem}

/* a11y-only text */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ============ PRAISE ============ */
/* Column-first: items flow down the left column, then the right (like the mockup). The two
   columns are split in the template, so the layout is deterministic regardless of quote height. */
.praise__title{margin-bottom:var(--sp-7)}
.praise__grid{display:flex;gap:var(--col-gap);align-items:flex-start}
.praise__col{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-6)}
.praise__item .t-cite{margin-top:.5em}
.praise__more{margin-top:var(--sp-6)}


/* ============ EVENTS + PRESS ============ */
.section--ep{padding-block:clamp(48px,5vw,64px)}
.ep-home-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--col-gap);align-items:stretch}
.ep-block{display:flex;flex-direction:column;min-width:0}
.ep-block+.ep-block{margin-top:0}
.ep-block .t-section{margin-bottom:var(--sp-6);color:var(--ia-green)}
.ep-block__photo{width:min(78%,380px);margin-top:var(--sp-6)}
.ep-block__photo img{width:100%;height:auto;display:block}
.ep-block__more{margin-top:auto;padding-top:var(--sp-5);display:inline-block;align-self:flex-start}

/* Events section */
.ep-events{display:flex;flex-direction:column;gap:var(--sp-4)}
.ep-event__title{line-height:1.25}
.ep-event__title a{text-decoration:none}
.ep-event__title a:hover{text-decoration:underline;text-underline-offset:2px}
.ep-event__venue{margin:2px 0 0;font-family:var(--font-serif);font-size:.875rem;color:var(--ia-ink);opacity:1}

/* Selected For */
.ep-selected{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-5);align-items:start;margin-bottom:var(--sp-6)}
.ep-selected__ip{width:140px;max-width:30vw}
.ep-selected__body .t-selected-label{margin-bottom:8px}
.ep-selected__list li{position:relative;padding-left:1.2em;margin-bottom:4px}
.ep-selected__list li::before{content:"";position:absolute;left:0;top:.58em;width:4px;height:4px;background:var(--ia-ink)}
.ep-selected__list a{text-decoration:underline;text-underline-offset:2px}

/* Press list */
.ep-press{display:flex;flex-direction:column;gap:var(--sp-4)}
.ep-press__item .t-press-pub{margin-right:.4ch;font-weight:600}

/* Events & Press page — uses the same shared .wrap width as the home page. */
.section--events-page{padding-block:clamp(48px,4.5vw,56px) clamp(56px,6vw,72px)}
.events-page__heading{margin-bottom:clamp(36px,4vw,48px)}
.events-page__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(52px,8.5vw,102px);align-items:start}
.events-page__list{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,18px)}
.events-page__title{line-height:1.2}
.events-page__title a:hover{text-decoration:underline;text-underline-offset:2px}
.events-page__venue{margin:2px 0 0}
.events-page__photo img{width:100%;height:auto}
.events-page__photo--left{margin-top:clamp(28px,3vw,36px)}
.events-page__photo--right{margin-bottom:clamp(28px,3vw,36px)}

.section--press-page{padding-block:clamp(68px,7vw,88px) clamp(40px,4vw,52px)}
.press-page__heading{margin-bottom:clamp(28px,3vw,36px)}
.press-page__selected{display:grid;grid-template-columns:210px minmax(0,1fr);
  gap:clamp(34px,4vw,48px);align-items:start;margin-bottom:clamp(54px,6vw,72px)}
.press-page__ip{width:210px;aspect-ratio:1;object-fit:cover}
.press-page__selected-copy .t-selected-label{margin-bottom:14px}
.press-page__selected-list{display:flex;flex-direction:column;gap:10px}
.press-page__selected-list li{position:relative;padding-left:1.25em}
.press-page__selected-list li::before{content:"";position:absolute;left:0;top:.62em;
  width:4px;height:4px;background:currentColor}
.press-page__selected-list a{text-decoration:underline;text-underline-offset:2px}
.press-page__grid{display:grid;grid-template-columns:minmax(0,1fr) 210px;
  gap:clamp(48px,6vw,72px);align-items:start}
.press-page__list{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,22px)}
.press-page__item{line-height:1.45}
.press-page__item .t-press-pub{margin-right:.4ch}
.press-page__art{display:flex;flex-direction:column;gap:24px}
.press-page__art img{width:100%;height:auto}
.section--bookclub-events-page{padding-top:clamp(40px,5vw,64px)}

/* ============ BOOK CLUB / CONTACT FORM ============ */
.form-intro{margin-bottom:var(--sp-7)}
.ia-form{max-width:none}
.ia-form__trap{display:none!important}
.ia-form__body[hidden],.ia-form__feedback[hidden]{display:none}
.ia-form__feedback{font-family:var(--font-sans);font-size:1rem;line-height:1.5}
.ia-form__feedback--ok{min-height:clamp(280px,32vw,420px);display:grid;place-items:center;
  text-align:center;color:var(--ia-green);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:700}
.ia-form__feedback--err{margin-bottom:var(--sp-5);color:#a1341f}
.ia-form.is-submitting button[type=submit]{opacity:.65;cursor:wait}
.ia-form__row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--sp-5);margin-bottom:var(--sp-5)}
.ia-form__field{display:flex;flex-direction:column;gap:var(--sp-3)}
.ia-form__field--full{grid-column:1/-1}
.ia-form input[type=text],.ia-form input[type=email],.ia-form textarea{
  border:1px solid var(--ia-line);background:transparent;border-radius:var(--radius);
  padding:14px;width:100%}
.ia-form textarea{min-height:150px;resize:vertical}
.ia-form__actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap);margin-top:var(--sp-5)}
.ia-form__note{margin-top:var(--sp-4);font-family:var(--font-sans);font-size:14px}
.ia-form__note--ok{color:var(--ia-green)}
.ia-form__note--err{color:#a1341f}

/* ============ ABOUT ============ */
.about{display:grid;grid-template-columns:minmax(0,520px) 1fr;gap:var(--col-gap);align-items:center}
.about__photo{background:var(--ia-cream);padding:clamp(24px,3vw,44px)}
.about__photo img{width:100%}
/* About bio is set in Hanken (sans) in the mockup, not the serif body. */
.about__bio{max-width:560px;font-family:var(--font-sans);font-weight:400;font-size:1rem;line-height:1.65}
.about__bio>*+*{margin-top:1.4em}

/* ============ WRITING ============ */
.writing-list__item{display:grid;grid-template-columns:210px 1fr;gap:var(--col-gap);align-items:center}
.writing-list__item+.writing-list__item{margin-top:var(--sp-6)}
.writing-list__label{background:var(--ia-sage);color:var(--ia-white);text-align:center;
  padding:18px 16px;border-radius:var(--radius)}

/* ============ CONTACT ============ */
.section--contact{padding-block:clamp(48px,4.5vw,56px) clamp(48px,5vw,64px)}
.contact{display:grid;grid-template-columns:minmax(0,1fr) clamp(260px,25vw,300px);
  gap:clamp(56px,8vw,112px);align-items:start}
.contact__copy{min-width:0}
.contact__groups>*+*{margin-top:var(--sp-6)}
.contact__group .t-contact-label{margin-bottom:4px}
.contact__group a{text-decoration:underline;text-underline-offset:2px}
.contact__image{aspect-ratio:20/23;overflow:hidden}
.contact__image img{width:100%;height:100%;object-fit:cover}
.section--contact .t-section{margin-bottom:clamp(48px,5vw,60px)}

/* ============ POLICY PAGES ============ */
.section--policy{padding-block:clamp(48px,6vw,80px)}
.policy-page__title{margin-bottom:var(--sp-7)}
.policy-page__content{max-width:900px}
.policy-page__content>*+*{margin-top:1.25rem}
.policy-page__content h2{margin-top:2.25rem;font-family:var(--font-sans);font-weight:800;
  font-size:1.125rem;line-height:1.3;color:var(--ia-green)}
.policy-page__content h3{margin-top:1.6rem;font-family:var(--font-sans);font-weight:700;
  font-size:1rem;line-height:1.35}
.policy-page__content ul{padding-left:1.25rem;list-style:disc}
.policy-page__content li+li{margin-top:.5rem}
.policy-page__content a{text-decoration:underline;text-underline-offset:2px}
.policy-page__updated{font-family:var(--font-sans);font-size:.875rem;color:var(--ia-green)}

/* ============ RESPONSIVE ============ */
@media(max-width:1024px){
  .selected__img{width:150px}
}
@media(max-width:768px){
  .nav-toggle{display:flex}
  .primary-nav{position:fixed;inset:0;background:var(--ia-cream);display:flex;align-items:center;
    justify-content:center;transform:translateX(100%);transition:transform .3s var(--ease);
    z-index:var(--z-overlay);margin:0}
  .nav-open .primary-nav{transform:translateX(0)}
  .primary-nav__list{flex-direction:column;gap:var(--sp-6)}
  .primary-nav__list .t-nav{font-size:18px}
  .book,.about,.contact,.writing-list__item,.ep-event{grid-template-columns:1fr}
  .book__cover{width:min(70%,260px);max-width:none;margin-inline:auto}
  .about__photo{max-width:420px}
  .contact{grid-template-columns:1fr}
  .contact__image{order:initial;max-width:300px;width:100%}
  .praise__grid{flex-direction:column;gap:var(--sp-6)}
  .writing-list__label{max-width:210px}
  .ia-form__row{grid-template-columns:1fr}
  .ia-form__actions{grid-template-columns:1fr;gap:var(--sp-4)}
  .hero-quote{min-height:280px;background-position:15% center}
  .hero-quote__inner{padding-block:var(--sp-7)}
  .hero-quote__text{max-width:100%}
  .site-footer__inner{flex-direction:column;align-items:flex-start;gap:var(--sp-5)}
  .site-footer__right{align-items:flex-start}
  .policy-links{justify-content:flex-start}
  .ep-home-grid{grid-template-columns:1fr}
  .ep-block+.ep-block{margin-top:var(--sp-8)}
  .events-page__grid{grid-template-columns:1fr;gap:var(--sp-7)}
  .events-page__column--right{display:flex;flex-direction:column}
  .events-page__column--right .events-page__photo{order:2;margin:var(--sp-6) 0 0}
  .events-page__column--right .events-page__list{order:1}
  .press-page__selected,.press-page__grid{grid-template-columns:1fr}
  .press-page__ip{width:min(210px,70vw)}
  .press-page__art{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
}
@media(max-width:480px){
  .book__cover{width:clamp(180px,52vw,210px)}
  .selected{grid-template-columns:1fr}
  .selected__img{width:100%;max-width:260px}
  .ep-selected{grid-template-columns:1fr}
  .ep-selected__ip{width:min(180px,70vw);max-width:none}
}