/* =========================================================================
   Tuva Tekstil ve Yayıncılık — "Dört Cilt, Tek Künye"
   tokens → fonts → base → header → giriş → siteler → chapters → entegre
   → künye → overlays → motion states → reduced motion
   ========================================================================= */

/* ---------- Fonts (self-hosted; Latin + Latin Extended-A in one file, Turkish included) ---------- */
@font-face{font-family:"DM Serif Display";src:url(../fonts/dm-serif-display-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url(../fonts/dm-serif-display-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-400.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(../fonts/inter-600.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"DMS Fallback";src:local("Times New Roman"),local("Times");size-adjust:105.6%;ascent-override:98.1%;descent-override:31.7%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("Helvetica");size-adjust:105.3%;ascent-override:92%;descent-override:22.9%;line-gap-override:0%}

/* ---------- Tokens ---------- */
:root{
  --paper:#F5EFE4; --paper-2:#EDE4D3; --cream:#FAEFDB;
  --ink:#1D1A16; --ink-2:#5B5348; --ink-3:#A89A82; --rule:#D8CDB9;
  --night:#2C203C; --night-ink:#F5EFE4; --night-ink-2:#C9C1B3;
  --cloth:#7B6498; --cloth-deep:#4F396A; --cloth-ink:#FFFFFF; --foil:#E5BE8D;
  --logo-blue:#4F87C6; --ridge:#8B5E3C; --peak:#602C00; --white:#FFFFFF;

  --tekstil-bind:#3062AD; --tekstil-deep:#1B4398; --tekstil-on:#FFFFFF; --tekstil-accent:var(--tekstil-bind); --tekstil-text:var(--tekstil-deep); --tekstil-night:#779ED9;
  --yay-bind:#A43686;     --yay-deep:#870086;     --yay-on:#FFFFFF;     --yay-accent:var(--yay-bind);         --yay-text:var(--yay-deep);         --yay-night:#D47DBC;
  --pub-bind:#C63F55;     --pub-deep:#B52055;     --pub-on:#FFFFFF;     --pub-accent:var(--pub-bind);         --pub-text:var(--pub-deep);         --pub-night:#D77989;
  --crafts-bind:#21795F;  --crafts-deep:#005E5F;  --crafts-on:#FFFFFF;  --crafts-accent:var(--crafts-bind);   --crafts-text:var(--crafts-deep);   --crafts-night:#4DB294;

  --ff-display:"DM Serif Display","DMS Fallback","Times New Roman",serif;
  --ff-text:"Inter","Inter Fallback",Arial,sans-serif;
  --ff-ui:"Inter","Inter Fallback",Arial,sans-serif;

  --fs-h2:clamp(2.1rem, 1.35rem + 3vw, 4.1rem);
  --fs-h3:clamp(1.45rem, 1rem + 1.8vw, 2.65rem);
  --fs-route:clamp(1.65rem, .85rem + 3.3vw, 3.7rem);
  --fs-marquee:clamp(2.5rem, .85rem + 6.6vw, 7.4rem);
  --fs-brand:clamp(1.45rem, 1rem + 1.15vw, 2.05rem);
  --fs-lead:clamp(1.15rem, 1.05rem + .6vw, 1.5rem);
  --fs-body:clamp(1rem, .95rem + .25vw, 1.125rem);
  --fs-caption:.875rem; --fs-label:.75rem;
  --lh-body:1.62; --lh-lead:1.45; --lh-display:1.02;
  --tr-display:-.01em; --tr-h1:-.02em; --tr-label:.14em;
  --measure:34em; --measure-lead:26em;

  --max:1440px;
  --margin:clamp(16px, 4.5vw, 80px);
  --gutter:clamp(16px, 2vw, 32px);
  --header-h:56px;
  /* the left edge of .container, for full-bleed scrollers that must line up with it */
  --edge:max(var(--margin), calc((100% - var(--max)) / 2 + var(--margin)));
  /* Vertical rhythm: four steps, nothing in between.
     xs caption→image · s heading→content · m module↔module · l zone↔zone (opener → text → showcase → end) */
  --space-xs:12px;
  --space-s:clamp(20px, 1vw + 16px, 32px);
  --space-m:clamp(48px, 3vw + 36px, 88px);
  --space-l:clamp(72px, 6vw + 48px, 136px);
  --section-y:var(--space-l);
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:192px;
  --r-xs:2px; --r-s:4px; --r-m:8px; --r-pill:999px;
  --lift:0 1px 0 rgba(0,0,0,.2),0 10px 22px -12px rgba(0,0,0,.55); --lift-up:0 1px 0 rgba(0,0,0,.2),0 18px 30px -14px rgba(0,0,0,.6);
  --dash:8.7px; --gap:7.9px;

  --ease-tuva:cubic-bezier(.22,1,.36,1);
  --ease-page:cubic-bezier(.7,0,.2,1);
  --ease-tuva-io:cubic-bezier(.65,0,.35,1);
  --dur-xs:.2s; --dur-s:.35s; --dur-m:.6s; --dur-l:.9s; --dur-xl:1.2s;

  --z-base:0; --z-raised:2; --z-sticky:10; --z-folio:50;
  --z-header:100; --z-ribbons:110; --z-sheet:200; --z-linkout:900; --z-skip:1000;

  --focus:var(--ink);
  --weave:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(0,0,0,.08) 0 1px,transparent 1px 3px);
}
[data-house="tekstil"]   {--bind:var(--tekstil-bind);--on-bind:var(--tekstil-on);--accent:var(--tekstil-accent);--house-text:var(--tekstil-text);--on-night:var(--tekstil-night);--stitch:rgba(245,239,228,.92);--aida:rgba(245,239,228,.07)}
[data-house="yayincilik"]{--bind:var(--yay-bind);--on-bind:var(--yay-on);--accent:var(--yay-accent);--house-text:var(--yay-text);--on-night:var(--yay-night);--stitch:rgba(245,239,228,.92);--aida:rgba(245,239,228,.07)}
[data-house="publishing"]{--bind:var(--pub-bind);--on-bind:var(--pub-on);--accent:var(--pub-accent);--house-text:var(--pub-text);--on-night:var(--pub-night);--stitch:rgba(245,239,228,.92);--aida:rgba(245,239,228,.07)}
[data-house="crafts"]    {--bind:var(--crafts-bind);--on-bind:var(--crafts-on);--accent:var(--crafts-accent);--house-text:var(--crafts-text);--on-night:var(--crafts-night);--stitch:rgba(245,239,228,.92);--aida:rgba(245,239,228,.07)}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;font:400 var(--fs-body)/var(--lh-body) var(--ff-text);color:var(--ink);background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
img,svg,canvas,picture{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p,h1,h2,h3,figure,blockquote{margin:0}
h1,h2,h3{font-weight:400}
ul,ol{margin:0;padding:0;list-style:none}
cite{font-style:italic}
address{font-style:normal}
button{font:inherit;color:inherit}
section[id]{scroll-margin-top:var(--header-h)}
::selection{background:var(--cloth);color:var(--paper)}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.i-arrow{width:16px;height:16px;flex:none;transition:transform var(--dur-s) var(--ease-tuva)}

:focus-visible{outline:3px dashed var(--focus);outline-offset:3px;border-radius:var(--r-xs)}
[data-surface="bind"] :focus-visible,.ribbon:focus-visible{--focus:var(--on-bind)}
[data-surface="night"] :focus-visible{--focus:var(--night-ink)}

.skip{position:fixed;left:var(--s-4);top:var(--s-4);z-index:var(--z-skip);background:var(--paper);color:var(--ink);font:600 14px/1 var(--ff-ui);padding:14px 18px;border-radius:var(--r-s);transform:translateY(-200%);text-decoration:none}
.skip:focus-visible{transform:none}
[tabindex="-1"]:focus{outline:none}

.container{max-width:var(--max);margin-inline:auto;padding-inline:var(--margin)}

/* ---------- Type ---------- */
.label,.kicker,.opener__kicker,.credit__label,.sheet__h{font:600 var(--fs-label)/1.2 var(--ff-ui);letter-spacing:var(--tr-label);text-transform:uppercase}
.lead{font-size:var(--fs-lead);line-height:var(--lh-lead);max-width:var(--measure-lead);text-wrap:pretty}
.h2{font:400 var(--fs-h2)/1.02 var(--ff-display);letter-spacing:var(--tr-display);text-wrap:balance}
.h3{font:400 var(--fs-h3)/1.08 var(--ff-display);letter-spacing:var(--tr-display);text-wrap:balance}
.caption,figcaption{font:400 13px/1.45 var(--ff-ui);color:var(--ink-2)}
/* Running text: one column, paragraphs spaced by the text itself, never by layout */
.prose{max-width:var(--measure)}
.prose p{text-wrap:pretty}
.prose>*+*{margin-top:1.1em}
.prose>.lead+*{margin-top:1.35em}
.dropcap::first-letter{font-family:var(--ff-display);float:left;font-size:calc(var(--fs-body)*var(--lh-body)*3.4);line-height:.8;padding:.06em .08em 0 0;color:var(--house-text)}
.line-mask{padding-block:.14em;margin-block:-.14em}

/* =========================================================================
   Header — running head, ribbons, Siteler sheet
   ========================================================================= */
.runhead{position:fixed;inset:0 0 auto;z-index:var(--z-header);height:var(--header-h);background:var(--cloth);color:var(--cloth-ink);border-bottom:1px solid transparent;transition:border-color var(--dur-s)}
.runhead.is-scrolled{border-bottom-color:rgba(29,26,22,.18)}
.runhead__inner{--focus:var(--cloth-ink);position:relative;display:flex;align-items:center;gap:var(--s-5);height:var(--header-h);padding-inline:var(--margin);max-width:none}
.runhead__brand{display:flex;align-items:center;gap:14px;text-decoration:none;min-height:44px;color:inherit}
.runhead__brand img{display:block;height:40px;width:auto}
.runhead__site{font:600 var(--fs-label)/1 var(--ff-ui);letter-spacing:var(--tr-label);text-transform:uppercase}
.runhead__label{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:none;text-decoration:none;font:600 var(--fs-label)/1 var(--ff-ui);letter-spacing:var(--tr-label);text-transform:uppercase;color:inherit;padding:12px 8px}
.runhead__mask{display:block;position:relative;overflow:clip;height:1.3em;padding-block:.15em;margin-block:-.15em;min-width:18em;text-align:center}
.runhead__text{display:block;white-space:nowrap}
.runhead__text+.runhead__text{position:absolute;left:0;right:0;top:.15em}

.ribbons{display:none;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin-left:auto;align-self:flex-start;height:var(--header-h);z-index:var(--z-ribbons);filter:drop-shadow(0 2px 2px rgba(29,26,22,.22))}
.ribbon{position:relative;display:flex;align-items:flex-end;justify-content:center;gap:5px;height:80px;top:-14px;padding:0 12px 32px;background:var(--bind);color:var(--on-bind);text-decoration:none;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 8px),0 100%);transition:top var(--dur-s) var(--ease-tuva)}
.ribbon::before,.ribbon::after{content:"";position:absolute;top:0;bottom:12px;width:1px;background:repeating-linear-gradient(180deg,currentColor 0 var(--dash),transparent var(--dash) calc(var(--dash) + var(--gap)));opacity:.4}
.ribbon::before{left:4px}.ribbon::after{right:4px}
.ribbon__name{font:600 11px/1 var(--ff-ui);letter-spacing:.04em;white-space:nowrap}
.ribbon .i-arrow{width:11px;height:11px}
.ribbon:hover,.ribbon:focus-visible,.ribbon[aria-current]{top:-4px}
.ribbon:hover .i-arrow,.ribbon:focus-visible .i-arrow{transform:translateY(2px)}
.ribbon:focus-visible{outline:2px solid var(--on-bind);outline-offset:-6px}

.siteler{margin-left:auto;min-height:44px;min-width:44px;padding:0 16px;border:1px solid currentColor;border-radius:var(--r-pill);background:transparent;font:600 var(--fs-label)/1 var(--ff-ui);letter-spacing:var(--tr-label);text-transform:uppercase;cursor:pointer}
html:not(.js) .siteler{display:none}
.siteler[aria-expanded="true"]{background:var(--cloth-ink);color:var(--cloth);border-color:var(--cloth-ink)}
.sheet{position:absolute;top:var(--header-h);left:0;right:0;z-index:var(--z-sheet);background:var(--paper);color:var(--ink);border-bottom:1px solid var(--rule);box-shadow:0 24px 40px -24px rgba(29,26,22,.35);padding:var(--s-5) var(--margin) var(--s-6);display:grid;gap:var(--s-6);max-height:calc(100svh - var(--header-h));overflow:auto;overscroll-behavior:contain}
.sheet[hidden]{display:none}
@media (min-width:768px){.sheet{grid-template-columns:1fr 1fr;align-items:start}}
.sheet__h{color:var(--ink-2);margin-bottom:var(--s-3)}
.sheet__sites{display:grid;gap:8px}
.sheet__sites a{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:12px;padding:12px 16px 12px 20px;min-height:56px;border-radius:var(--r-s);background:var(--bind);color:var(--on-bind);text-decoration:none;box-shadow:inset 8px 0 0 rgba(0,0,0,.15)}
.sheet__name{font:400 21px/1.1 var(--ff-display)}
.sheet__role{grid-column:1;font:400 12px/1.3 var(--ff-ui)}
.sheet__sites .i-arrow{grid-column:2;grid-row:1/3}
.sheet__toc a{display:block;padding:10px 0;min-height:44px;font:400 19px/1.25 var(--ff-display);text-decoration:none;border-bottom:1px solid var(--rule)}

@media (min-width:1024px) and (pointer:fine){
  .runhead__label{display:block}
  .ribbons{display:grid}
  @media (max-width:1279px){.ribbon{padding-inline:10px}.ribbon .i-arrow{display:none}}
  .siteler,.sheet{display:none!important}
}
@media (max-width:419px){.runhead__site{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}}

/* =========================================================================
   Giriş — one full-screen visual (placeholder until the image arrives)
   ========================================================================= */
.hero{position:relative;height:100svh;min-height:480px;padding-top:var(--header-h);background:var(--paper)}
.hero__media{position:relative;height:100%;overflow:clip;background:var(--paper-2)}
.hero__media>img{width:100%;height:100%;object-fit:cover}

/* Marquees */
.kenar,.disciplines{overflow:clip;padding-block:var(--s-8);color:#8F826B;white-space:nowrap;user-select:none}
.kenar__track,.disciplines__track{display:flex;width:max-content;font:italic 400 var(--fs-marquee)/1 var(--ff-display);letter-spacing:-.01em}
.kenar__track span,.disciplines__track span{flex:none;padding-right:.25em}

/* =========================================================================
   Chapters
   ========================================================================= */
.chapter{position:relative;background:var(--paper);overflow-x:clip}
.chapter[data-house="yayincilik"]{background:var(--cream)}

/* Opener */
.opener{display:grid;grid-template-columns:1fr}
.opener__verso{position:relative;container-type:inline-size;background:var(--bind);background-image:var(--weave);color:var(--on-bind);padding:clamp(28px, 5vw, 80px) var(--margin);display:flex;flex-direction:column;gap:var(--s-5)}
.opener__verso::before{content:"";position:absolute;left:0;right:0;top:-11px;height:12px;background:var(--bind);-webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/16px 100%}
.numeral-box{--cell:6px;position:relative;height:180px;background-image:linear-gradient(var(--aida) 1px,transparent 1px),linear-gradient(90deg,var(--aida) 1px,transparent 1px);background-size:var(--cell) var(--cell);display:grid;place-items:center;overflow:clip}
.numeral{font:400 140px/1 var(--ff-display);letter-spacing:.02em;color:var(--on-bind)}
.numeral-box .stitch{position:absolute;left:0;top:0;pointer-events:none}
.opener__title{font:400 clamp(2.1rem,5.4vw,6.2rem)/var(--lh-display) var(--ff-display);font:400 min(6.2rem, 11cqi)/var(--lh-display) var(--ff-display);letter-spacing:var(--tr-display);text-wrap:balance}
.opener__kicker{max-width:28em}
/* Visit buttons lift on hover with `translate` (GSAP owns `transform` on them) */
.cta{position:relative;align-self:flex-start;display:inline-flex;align-items:center;gap:18px;min-height:64px;padding:14px 26px;background:var(--paper);color:var(--house-text);text-decoration:none;border-radius:var(--r-s);box-shadow:var(--lift);transition:background-color var(--dur-s),box-shadow var(--dur-s),translate var(--dur-s) var(--ease-tuva)}
.cta__frame{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);overflow:visible;pointer-events:none}
.cta__dash{fill:none;stroke:currentColor;stroke-opacity:.5;stroke-width:1.25;stroke-dasharray:var(--dash) var(--gap)}
.cta__sew{fill:none;stroke:#fff;stroke-width:4;stroke-dasharray:100 100;stroke-dashoffset:0}
.cta__text{display:grid;gap:3px}
.cta__l1{font:600 18px/1.2 var(--ff-ui)}
.cta__l2{font:400 13px/1.2 var(--ff-ui);color:var(--ink-2)}
.cta .i-arrow{width:20px;height:20px}
.cta:hover,.cta:focus-visible{background:var(--white);box-shadow:var(--lift-up);translate:0 -2px}
.cta:hover .i-arrow,.cta:focus-visible .i-arrow{transform:translate(4px,-4px)}
.opener__recto{position:relative;overflow:clip;aspect-ratio:4/3;background:var(--paper-2)}
.opener__recto img{width:100%;height:100%;object-fit:cover}
.opener__recto--panel{aspect-ratio:auto;background:var(--cream);display:grid;place-items:center;padding:var(--s-7) var(--margin)}
.resolve{position:relative;width:min(88vw,560px)}
.resolve__img{position:relative}
.resolve img{width:100%;height:auto;border-radius:var(--r-xs);box-shadow:0 18px 40px -24px rgba(29,26,22,.45)}
.resolve__img canvas{position:absolute;left:21.68%;top:16.62%;width:59.44%;height:56.52%;border-radius:50%;pointer-events:none}
.resolve figcaption{margin-top:12px}
@media (min-width:1024px){
  .opener{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr);height:min(calc(100svh - var(--header-h)),1000px);min-height:640px}
  .opener__verso{padding:clamp(32px,4.5vw,80px);justify-content:flex-start}
  .opener__verso .numeral-box,.opener__verso .opener__title{margin-top:auto}
  .opener__kicker{margin-top:calc(-1 * var(--s-2))}
  .numeral-box{--cell:9px;height:clamp(180px,34svh,380px)}
  .numeral{font-size:clamp(162px,30.6svh,342px)}
  .opener__recto{aspect-ratio:auto;height:100%;min-height:0}
}

/* ---------- The chapter system ----------
   opener → leaf → showcase → tail plate → chapter end, the same in every chapter.
   · leaf: the chapter text runs unbroken in one column (left page); the chapter's one plate
     sits beside it and travels with it (right page). On narrow screens the plate follows the text.
   · showcase: modules (products, books, brands) after the text, never between paragraphs.
   · one spacing scale (--space-*) for every gap between blocks. */
/* minmax(0,1fr): a module's content (e.g. a horizontal scroller) must never widen the column */
.leaf{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-m);padding-top:var(--space-l);align-items:start}
.aside{min-width:0;max-width:520px}
@media (min-width:1024px){
  .leaf{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .leaf>.prose{grid-column:1/7;max-width:none}
  .leaf>.aside{grid-column:8/13;max-width:none;position:sticky;top:calc(var(--header-h) + var(--space-s))}
  /* a plate beside the text always fits the screen, so it can stay in view while the text is read */
  .aside .plate{width:min(100%, calc((100svh - var(--header-h) - 2 * var(--space-s) - 48px) * (var(--ar))))}
}

.showcase{display:grid;grid-template-columns:minmax(0,1fr);row-gap:var(--space-m);padding-top:var(--space-l)}
.module__h{margin-bottom:var(--space-s)}
.module__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--space-s)}
.module__head .module__h{margin-bottom:0}
.module>.caption{margin-top:var(--space-xs)}

/* Plates */
.plate__rule{display:block;height:1px;background:var(--ink);margin-bottom:12px;transform-origin:0 50%}
.plate__img{position:relative;aspect-ratio:var(--ar);overflow:clip;border-radius:var(--r-xs);background:var(--paper-2)}
.plate__img img{width:100%;height:100%;object-fit:cover}
.plate figcaption{margin-top:10px}
.plate--pano .plate__img{aspect-ratio:4/3}
.plate--pano img{object-position:45% 60%}
@media (min-width:768px){.plate--pano .plate__img{aspect-ratio:var(--ar)}.plate--pano img{object-position:50% 50%}}

/* Pull line: the closing sentence of a text, set apart by a running stitch */
.pull{--thread:var(--accent);color:var(--house-text)}
.prose>.pull{margin-top:var(--space-s)}
.pull::before{content:"";display:block;width:56px;height:2px;margin-bottom:.9em;background:repeating-linear-gradient(90deg,var(--thread) 0 8px,transparent 8px 13px)}
.pull p{max-width:22em;font:italic 400 clamp(1.3rem, .95rem + 1.05vw, 2rem)/1.2 var(--ff-display);letter-spacing:-.005em;hanging-punctuation:first}
.pull--night{--thread:var(--foil);color:var(--night-ink)}

/* Flat-lay callouts */
.callouts{position:absolute;inset:0;pointer-events:none}
.callouts__lines{position:absolute;inset:0;width:100%;height:100%;display:none}
.callouts__lines line{stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.callout i{position:absolute;left:calc(var(--x)*1%);top:calc(var(--y)*1%);width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px var(--paper)}
.callout b{display:none;position:absolute;left:calc((var(--x) + var(--dx))*1%);top:calc((var(--y) + var(--dy))*1%);translate:-50% -50%;background:var(--paper);color:var(--ink);font:600 12px/1 var(--ff-ui);padding:5px 8px;border-radius:var(--r-s);white-space:nowrap;box-shadow:0 2px 8px -4px rgba(0,0,0,.4)}
@media (min-width:1024px){.callouts__lines,.callout b{display:block}}

/* Full-bleed tail plates */
.bleed{margin-top:var(--space-l)}
.bleed__img{position:relative;overflow:clip;aspect-ratio:4/3;background:var(--paper-2)}
.bleed__img img{width:100%;height:100%;object-fit:cover}
.bleed figcaption{margin-top:var(--space-xs)}
.bleed--punch .bleed__img img{object-position:30% 50%}
@media (min-width:1024px){
  .bleed--hello .bleed__img{aspect-ratio:21/9}
  .bleed--punch .bleed__img{aspect-ratio:1920/640}
  .bleed--punch .bleed__img img{object-position:50% 50%}
}

/* Chapter end */
.chapter-end{padding-block:var(--space-m) var(--space-l)}
.chapter-end__link{position:relative;display:inline-grid;grid-template-columns:auto auto;align-items:center;column-gap:24px;row-gap:4px;padding:22px 30px 22px 28px;background:var(--bind);background-image:var(--weave);color:var(--on-bind);text-decoration:none;border-radius:var(--r-s);box-shadow:var(--lift);transition:box-shadow var(--dur-s),translate var(--dur-s) var(--ease-tuva)}
.chapter-end__l1{font:400 var(--fs-h3)/1.1 var(--ff-display)}
.chapter-end__l2{grid-column:1;font:400 14px/1.3 var(--ff-ui);color:color-mix(in srgb,var(--on-bind) 78%,transparent)}
.chapter-end__link .i-arrow{grid-column:2;grid-row:1/3;width:28px;height:28px}
.chapter-end__link .stitchframe rect{stroke-opacity:.55}
.chapter-end__link:hover,.chapter-end__link:focus-visible{box-shadow:var(--lift-up);translate:0 -2px}
.chapter-end__link:hover .i-arrow,.chapter-end__link:focus-visible .i-arrow{transform:translate(4px,-4px)}
.chapter-end__link:hover .stitchframe rect,.chapter-end__link:focus-visible .stitchframe rect{stroke-opacity:.9;animation:march .8s linear infinite}

.snap-hint{font:600 12px/1 var(--ff-ui);letter-spacing:.06em;color:var(--ink-2)}
.ctx-desk .snap-hint{display:none}

/* ---------- Bölüm I ---------- */
.portfolio__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-m);align-items:start}
/* Brand wall: DMC as the bound lead tile, then equal tiles two by two (Hello, our own brand, closes the grid) */
.brands__list{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-3)}
.brands__list li{position:relative;display:grid;place-items:center;min-height:clamp(76px, 3vw + 50px, 92px);padding:14px 12px;text-align:center;text-wrap:balance;font:400 clamp(1.25rem, .95rem + .8vw, 1.75rem)/1.1 var(--ff-display);background:color-mix(in srgb,var(--white) 50%,var(--paper));border:1px solid var(--rule);border-radius:var(--r-s)}
.brands__list .brands__dmc{grid-column:1/-1;place-items:start;align-content:center;gap:12px;padding:clamp(22px, 2vw + 14px, 34px);text-align:left;font-size:calc(var(--fs-brand)*2);line-height:1;background:var(--bind);background-image:var(--weave);color:var(--on-bind);border-color:transparent}
.brands__dmc .stitchframe rect{stroke-opacity:.5}
.brands__quote{display:block;font:italic 400 clamp(1.0625rem, .95rem + .5vw, 1.3125rem)/1.4 var(--ff-text);color:color-mix(in srgb,var(--on-bind) 85%,transparent);max-width:30em;letter-spacing:0}
.mask{display:block;overflow:clip;padding-block:.14em;margin-block:-.14em}
.mask>span{display:inline-block}
.brands__list .hello{align-content:center;gap:8px;background:var(--paper-2)}
.hello__label{font:600 var(--fs-label)/1.2 var(--ff-ui);letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--ink-2)}
.hello img{width:min(112px, 70%)}
@media (min-width:1024px){
  .portfolio__grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gutter)}
  .portfolio__grid>.brands{grid-column:1/6;padding-top:13px} /* tiles start level with the photo, under its plate rule */
  .portfolio__grid>.flatlay{grid-column:7/13}
}

/* ---------- Bölüm II ---------- */
.u-gold{background:linear-gradient(var(--yay-bind),var(--yay-bind)) 0 100%/0% .12em no-repeat;transition:background-size .9s var(--ease-tuva)}
.u-gold.is-on{background-size:100% .12em}
.pile figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:14px}
.pile__counter{font:600 12px/1 var(--ff-ui);letter-spacing:.06em;padding:6px 8px;border:1px solid var(--rule);border-radius:var(--r-s);white-space:nowrap;color:var(--ink);align-self:flex-start;font-variant-numeric:tabular-nums}
.pile__stack{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.pile__stack img{width:100%;height:auto;border-radius:var(--r-xs);box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.pile__stack img:nth-of-type(4){order:1}.pile__stack img:nth-of-type(3){order:2}.pile__stack img:nth-of-type(2){order:3}.pile__stack img:nth-of-type(1){order:4}
.tie{display:none}
.pile__counter{display:none}
@media (min-width:1024px){
  .aside .pile{width:min(100%, 440px, calc((100svh - var(--header-h) - 2 * var(--space-s) - 64px) * 760 / 1050))}
  html:not(.ctx-touch) .pile__stack{display:block;position:relative;aspect-ratio:760/1050}
  html:not(.ctx-touch) .pile__stack img{position:absolute;inset:0;height:100%;object-fit:contain;transform:rotate(var(--r));box-shadow:none;filter:drop-shadow(0 10px 14px rgba(0,0,0,.22))}
  .ctx-desk .pile__counter{display:inline-block}
  .ctx-desk .tie{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
  .tie path{fill:none;stroke-linecap:round}
  .tie__band path,.bow path{stroke:var(--yay-accent);stroke-width:.75}
  .tie__hi path{stroke:rgba(255,255,255,.5);stroke-width:.3;stroke-dasharray:.6 1.4}
}
.wall{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-6) var(--gutter);align-items:start}
.wall figure{transform-origin:50% 100%}
.wall img{width:100%;height:auto;border-radius:var(--r-xs);box-shadow:0 12px 24px -16px rgba(29,26,22,.5);transition:transform var(--dur-s) var(--ease-tuva),box-shadow var(--dur-s)}
.wall figcaption{margin-top:10px}
@media (min-width:1024px){
  .wall{grid-template-columns:repeat(4,minmax(0,1fr))}
  .wall figure:nth-child(4n+2),.wall figure:nth-child(4n+4){margin-top:48px}
}
@media (hover:hover) and (pointer:fine){.wall figure:hover img{transform:translateY(-6px) rotateY(-6deg);box-shadow:0 22px 30px -18px rgba(29,26,22,.6)}}
.gatefold__panels{position:relative;aspect-ratio:16/9;perspective:1400px}
.gatefold__top,.gatefold__bottom{position:absolute;left:0;right:0;height:50%;overflow:clip}
.gatefold__top{top:0}
.gatefold__bottom{top:50%;transform-origin:50% 0;-webkit-backface-visibility:hidden;backface-visibility:hidden}
.gatefold img{position:absolute;left:0;width:100%;height:200%;object-fit:cover;object-position:50% 50%}
.gatefold__top img{top:0}
.gatefold__bottom img{top:-100%}
.gatefold__shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.12));opacity:0;pointer-events:none}
@media (min-width:1024px){.gatefold__panels{aspect-ratio:1920/555}}

/* ---------- Bölüm III ---------- */
.dizgi{position:relative;display:inline-block}
.dizgi__fx{position:absolute;inset:-.14em 0;padding-block:.14em;overflow-x:visible;overflow-y:clip;display:none}
.dz-tr,.dz-en{position:absolute;left:0;top:.14em;white-space:nowrap}
.chapter .disciplines{margin-top:var(--space-l);padding-block:0}
/* Yayın programından: a shelf of covers; a native scroller, pinned and driven by scroll on desk */
.telif{position:relative;padding-top:var(--space-m)}
.telif__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--space-s)}
.telif__head .module__h{margin-bottom:0}
.telif__viewport{overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding-inline:var(--edge);padding:8px var(--edge) 20px;scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
.telif__track{display:flex;gap:28px;align-items:flex-end;width:max-content}
.book{flex:none;scroll-snap-align:start}
.book img{height:min(52vw,360px);width:auto;max-width:none;border-radius:var(--r-xs);box-shadow:0 14px 28px -18px rgba(29,26,22,.55)}
.book figcaption{margin-top:10px}
.book--catalogue{padding-left:28px;border-left:1px dashed var(--rule)}
.telif__cap{margin-top:var(--space-xs)}
.ctx-desk .telif{height:100svh;min-height:600px;padding:calc(var(--header-h) + var(--space-s)) 0 var(--space-s);display:flex;flex-direction:column;justify-content:center}
.ctx-desk .telif>.container{width:100%} /* auto margins would otherwise shrink-wrap and centre it in the column */
.ctx-desk .telif__viewport{overflow:clip;scroll-snap-type:none;padding:8px 0 8px var(--edge)}
.ctx-desk .telif__track{padding-right:var(--edge)}
.ctx-desk .book img{height:min(46svh,420px)}
.route{display:flex;flex-direction:column;align-items:flex-start;color:var(--ink);font:400 var(--fs-route)/1 var(--ff-display);letter-spacing:var(--tr-display)}
.route__thread{display:block;width:2px;height:48px;margin:10px 0 10px .5em;background:repeating-linear-gradient(180deg,var(--pub-accent) 0 12px,transparent 12px 19px)}
@media (min-width:768px){
  .route{flex-direction:row;align-items:center;flex-wrap:nowrap}
  .route__thread{flex:1;width:auto;height:2px;min-width:40px;margin:0 .4em;background:repeating-linear-gradient(90deg,var(--pub-accent) 0 12px,transparent 12px 19px);position:relative;top:-.12em}
}

/* ---------- Bölüm IV ---------- */
.shades{display:grid;grid-template-columns:1fr 1fr;gap:var(--gutter)}
.shade{background:var(--white);padding:28px 10px 12px;border-radius:var(--r-s);box-shadow:0 1px 2px rgba(0,0,0,.12),0 12px 24px -18px rgba(29,26,22,.4);-webkit-mask:radial-gradient(circle 6px at 50% 14px,#0000 98%,#000);mask:radial-gradient(circle 6px at 50% 14px,#0000 98%,#000)}
.shade__img{aspect-ratio:4/5;overflow:clip;background:var(--paper-2)}
.shade__img img{width:100%;height:100%;object-fit:cover}
.shade__tag{display:block;margin-top:10px;font:600 14px/1.2 var(--ff-ui);color:var(--ink)}
.kits{display:grid;grid-auto-flow:column;grid-auto-columns:44vw;gap:var(--gutter);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;margin-inline:calc(-1 * var(--margin));padding-inline:var(--margin);scroll-padding-inline:var(--margin);overscroll-behavior-x:contain}
.kit{scroll-snap-align:start}
.kit__img{aspect-ratio:1/1;overflow:clip;border-radius:var(--r-s);background:var(--paper-2)}
.kit__img img{width:100%;height:100%;object-fit:cover}
.kit__img--contain{background:var(--white)}
.kit__img--contain img{object-fit:contain;padding:8%}
.kit__tag{display:block;margin-top:10px;font:600 14px/1.25 var(--ff-ui)}
@media (max-width:1023px){.kits{grid-auto-columns:40vw}}
.kits:focus-visible{outline-offset:-3px}
.lenis .telif__viewport[data-lenis-prevent],.lenis .kits[data-lenis-prevent]{overscroll-behavior-y:auto}
@media (min-width:1024px){
  .kits-wrap .snap-hint{display:none}
  .shades{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kits{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;margin-inline:0;padding-inline:0}
}
.process{display:grid;gap:var(--space-s)}
.process__h{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.75rem)}
.process__body{position:relative}
.process__thread{position:absolute;left:17px;top:18px;bottom:18px;width:2px;background:repeating-linear-gradient(180deg,var(--crafts-accent) 0 10px,transparent 10px 16px)}
.process__list{position:relative;display:grid;gap:14px;counter-reset:none}
.process__list li{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:14px}
.num{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--crafts-text);background:var(--paper);font:600 14px/1 var(--ff-ui);color:var(--crafts-text);transition:background-color .3s,color .3s;font-variant-numeric:tabular-nums}
.process__label{font:400 16px/1.35 var(--ff-ui)}
.is-sewn .num,html:not(.motion) .num{background:var(--crafts-text);color:var(--paper)}
.credits{display:grid;gap:var(--space-s) var(--gutter)}
.credit{display:grid;gap:var(--s-3);align-content:start}
.credit__label{color:var(--ink-2)}
.credit__list{display:flex;flex-wrap:wrap;gap:0 .45em;font:400 var(--fs-brand)/1.15 var(--ff-display)}
.credit__list li:not(:last-child)>span::after{content:" ·";color:var(--crafts-accent)}
@media (min-width:768px){.credits{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* =========================================================================
   Sonsöz · Entegre (night) — the same leaf: the text, and the four volumes bound beside it
   ========================================================================= */
.entegre{position:relative;background:var(--night);color:var(--night-ink);padding-bottom:var(--space-l);overflow-x:clip}
.headband{display:grid}
.headband i{display:block;height:16px}
.headband i:nth-child(1){background:var(--tekstil-bind)}
.headband i:nth-child(2){background:var(--yay-bind)}
.headband i:nth-child(3){background:var(--pub-bind)}
.headband i:nth-child(4){background:var(--crafts-bind)}
.entegre__head{padding-top:var(--space-l)}
.entegre .h2{color:var(--night-ink)}
.entegre .leaf{padding-top:var(--space-m)}
.u{font-weight:600;color:var(--on-night);white-space:nowrap;padding-bottom:.06em;background:linear-gradient(var(--on-night),var(--on-night)) 0 100%/0% .12em no-repeat;-webkit-box-decoration-break:slice;box-decoration-break:slice}
html:not(.motion) .u{background-size:100% .12em}
.tekcilt{position:relative;display:grid;justify-items:center;gap:var(--space-m);padding:24px 0 0 24px}
.block{position:relative;width:100%;display:grid;gap:0}
.spine{position:relative;display:grid;align-items:center;min-height:56px;padding:10px 20px 10px 40px;border-radius:var(--r-s);background:var(--bind);color:var(--on-bind);box-shadow:inset 10px 0 0 rgba(0,0,0,.15)}
.spine__main{display:grid;gap:6px;min-width:0}
.spine__name{font:400 22px/1 var(--ff-display);letter-spacing:-.01em;white-space:nowrap}
.spine--deco{min-height:56px;cursor:default}
.spine--deco .spine__name{color:var(--on-bind)}
.spine__role{font:400 13px/1.3 var(--ff-ui);color:color-mix(in srgb,var(--on-bind) 82%,transparent)}
.sew{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);overflow:visible;pointer-events:none}
.bookplate{background:var(--paper);border-radius:var(--r-s);padding:8px 10px;box-shadow:0 1px 0 rgba(0,0,0,.25),0 6px 14px -8px rgba(0,0,0,.6)}
.bookplate img{width:100%;height:auto}
.bookplate--small{width:160px}
@media (min-width:1024px){
  .spine--deco{min-height:80px}
  .spine--deco .spine__name{font-size:clamp(28px, 2.6vw, 40px)}
}

/* =========================================================================
   Siteler — the four sister sites as cards, right after the opening visual
   ========================================================================= */
.dizin{padding-block:var(--section-y)}
.dizin__lead{margin-bottom:var(--space-m)}
.dizin__grid{display:grid;grid-template-columns:1fr;gap:var(--gutter)}
@media (min-width:768px){.dizin__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1280px){.dizin__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.card{position:relative;isolation:isolate;display:flex;flex-direction:column;height:100%;padding:10px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-m);color:var(--ink);text-decoration:none;overflow:clip;transition:color .45s var(--ease-tuva)}
.card::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--bind);background-image:var(--weave);clip-path:inset(100% 0 0 0);transition:clip-path .45s var(--ease-tuva)}
.card__img{display:block;min-height:0;aspect-ratio:4/5;overflow:clip;border-radius:var(--r-s);background:var(--paper-2);margin-bottom:18px}
.card__img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-tuva)}
.card__img--contain img{object-fit:contain;padding:6%}
.card__name,.card__role{padding-inline:10px}
.card__name{margin-top:4px;min-height:2.1em;font:400 clamp(1.5rem, 1.1rem + 1.1vw, 2.25rem)/1.05 var(--ff-display);text-wrap:balance}
.card__role{margin-top:8px;margin-bottom:18px;font:400 14px/1.4 var(--ff-ui);color:var(--ink-2);transition:color .45s}
/* The visit bar: house colour at rest, turns paper when the card fills with the house colour */
.card__domain{margin-top:auto;padding:13px 16px;display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 14px/1.2 var(--ff-ui);background:var(--bind);color:var(--on-bind);border-radius:var(--r-s);transition:background-color .45s,color .45s}
.stitchframe{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);overflow:visible;pointer-events:none}
.stitchframe rect{fill:none;stroke:var(--on-bind);stroke-width:1;stroke-dasharray:var(--dash) var(--gap);stroke-opacity:.35;transition:stroke-opacity var(--dur-s)}
.card .stitchframe{inset:6px;width:calc(100% - 12px);height:calc(100% - 12px)}
.card .stitchframe rect{stroke:var(--on-bind);stroke-opacity:0;stroke-width:1.25}
.card:hover,.card:focus-visible{color:var(--on-bind)}
.card:hover::before,.card:focus-visible::before{clip-path:inset(0)}
.card:hover .card__role,.card:focus-visible .card__role{color:var(--on-bind)}
.card:hover .card__domain,.card:focus-visible .card__domain{background:var(--paper);color:var(--house-text)}
.card:hover .card__img img,.card:focus-visible .card__img img{transform:scale(1.04)}
.card:hover .i-arrow,.card:focus-visible .i-arrow{transform:translate(4px,-4px)}
.card:hover .stitchframe rect,.card:focus-visible .stitchframe rect{stroke-opacity:.9;animation:march .8s linear infinite}
.card:focus-visible{outline-color:var(--ink)}
@keyframes march{to{stroke-dashoffset:-16.6}}

/* =========================================================================
   Künye (footer)
   ========================================================================= */
/* Same layout as the sister sites: brand + link columns, a centred social row, a darker base strip */
.kunye{--night-ink:var(--cloth-ink);--night-ink-2:color-mix(in srgb,var(--cloth-ink) 80%,transparent);background:var(--cloth);color:var(--night-ink);padding-top:var(--s-9);border-top:1px solid rgba(245,239,228,.1);font:400 15px/1.5 var(--ff-ui)}
.kunye__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s-7) var(--gutter);max-width:none} /* full width like the header, so the logo sits under the header logo */
.kunye__brand,.kunye__col:last-child{grid-column:1/-1} /* the two link lists sit side by side until the four-column row */
.kunye__brand{display:grid;justify-items:start;align-content:start;gap:var(--s-4)}
.kunye__logo{display:block;width:min(100%,160px);height:auto}
.kunye__name{font:400 26px/1.15 var(--ff-display);text-transform:uppercase;letter-spacing:.01em;max-width:12em}
.kunye__btn{display:inline-flex;align-items:center;gap:10px;min-height:44px;margin-top:var(--s-2);padding:10px 20px;border-radius:var(--r-s);background:var(--white);color:var(--cloth-deep);font:600 14px/1 var(--ff-ui);text-decoration:none;box-shadow:var(--lift);transition:background-color var(--dur-s),translate var(--dur-s) var(--ease-tuva)}
.kunye__btn svg{width:18px;height:18px}
.kunye__btn:hover,.kunye__btn:focus-visible{background:var(--paper);translate:0 -2px}
.kunye__col{display:grid;align-content:start;gap:var(--s-3)}
.kunye__h{justify-self:start;padding-bottom:6px;margin-bottom:var(--s-2);border-bottom:2px solid currentColor;font:600 16px/1.2 var(--ff-ui);color:var(--night-ink)}
.kunye__list{display:grid;gap:2px}
.kunye__list a{display:inline-flex;align-items:center;gap:10px;min-height:32px;color:var(--night-ink-2);text-decoration:none;transition:color var(--dur-xs)}
.kunye__list a:hover,.kunye__list a:focus-visible{color:var(--night-ink);text-decoration:underline;text-underline-offset:.2em}
.kunye__list svg{width:16px;height:16px;flex:none}
.kunye__legal{font:600 var(--fs-label)/1.4 var(--ff-ui);letter-spacing:var(--tr-label)}
.kunye__addr{font-style:normal;color:var(--night-ink-2);max-width:22em}
.kunye__social{display:grid;justify-items:center;gap:var(--s-5);margin-top:var(--s-8);text-align:center}
.kunye__social .kunye__h{justify-self:center;font-size:18px}
.social{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s-5) var(--s-6)}
.social__link{display:grid;justify-items:center;gap:10px;color:var(--night-ink);text-decoration:none}
.social__icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:rgba(255,255,255,.12);transition:background-color var(--dur-s),color var(--dur-s),translate var(--dur-s) var(--ease-tuva)}
.social__icon svg{width:24px;height:24px}
.social__handle{font:400 12px/1.2 var(--ff-ui);color:var(--night-ink-2);transition:color var(--dur-s)}
.social__link:hover .social__icon,.social__link:focus-visible .social__icon{background:var(--white);color:var(--cloth-deep);translate:0 -4px}
.social__link:hover .social__handle,.social__link:focus-visible .social__handle{color:var(--night-ink)}
.kunye__base{margin-top:var(--s-8);background:var(--cloth-deep)}
.kunye__copy{padding-block:var(--s-5);font:400 13px/1.4 var(--ff-ui);color:var(--night-ink-2);text-align:center}
@media (min-width:1024px){.kunye__grid{grid-template-columns:2fr 1fr 1fr 1.6fr}.kunye__brand,.kunye__col:last-child{grid-column:auto}}

/* =========================================================================
   Overlays
   ========================================================================= */
.folio{position:fixed;right:var(--margin);bottom:24px;z-index:var(--z-folio);font:600 12px/1 var(--ff-ui);letter-spacing:.08em;font-variant-numeric:tabular-nums;color:var(--ink-2);background:var(--paper);padding:6px 8px;border-radius:var(--r-s);opacity:0;visibility:hidden;pointer-events:none}
.linkout{position:fixed;inset:0;z-index:var(--z-linkout);visibility:hidden;opacity:0;pointer-events:none;perspective:1600px;overflow:hidden}
.linkout__page{position:absolute;inset:0;display:grid;place-items:center;background:var(--bind,var(--cloth));background-image:var(--weave);color:var(--on-bind,var(--paper));transform:rotateY(90deg);transform-origin:100% 50%}
.linkout__name{font:400 var(--fs-h2)/1 var(--ff-display);letter-spacing:var(--tr-display);padding-inline:var(--margin);text-align:center}

/* =========================================================================
   Motion states (only under html.intro; everything else is set by GSAP)
   ========================================================================= */
html.intro .runhead__brand,html.intro .runhead__label,html.intro .ribbons{opacity:0}
html.og .runhead,html.og .folio{display:none}

/* =========================================================================
   Reduced motion / no motion: static, complete, readable
   ========================================================================= */
html:not(.motion) .kenar__track,html:not(.motion) .disciplines__track{white-space:normal;width:auto;font-size:var(--fs-h3);justify-content:center;text-align:center;padding-inline:var(--margin)}
html:not(.motion) .kenar,html:not(.motion) .disciplines{white-space:normal}
html:not(.motion) .kenar__track .clone,html:not(.motion) .disciplines__track .clone{display:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* =========================================================================
   Share-image render (?og=1): the opening visual, fitted to 1200×630
   ========================================================================= */
html.og .hero{padding-top:0;height:630px;min-height:0}

/* =========================================================================
   Phone landscape fits one screen
   ========================================================================= */
@media (orientation:landscape) and (max-height:500px){
  .resolve{width:min(88vw,560px,calc((100svh - var(--header-h) - 64px)*.95))}
}

/* Turkish text: no fi/fl ligatures (they hide the dot of i); English keeps them.
   The html prefix outranks the later `font:` shorthands, which reset font-variant-ligatures. */
html :lang(tr){font-variant-ligatures:no-common-ligatures}
html :lang(en){font-variant-ligatures:common-ligatures}

/* Safari < 16: no overflow:clip */
@supports not (overflow:clip){
  html{overflow-x:visible}
  body{overflow-x:hidden}
  .kenar,.disciplines,.mask,.runhead__mask,.line-mask{overflow:hidden}
}