/* İlmek ilmek: the page is the cloth the opening loom weaves.
   One gold weft leaves the loom's shuttle and runs down the page, turning at the selvedges and passing
   over and under the letters of each heading. Around it: fabric swatches, weave drafts, punched cards,
   a care label, five threads, a fringed end and the loom's own gauge. Loaded after the shared styles. */

:root { --side: clamp(20px, 5vw, 72px); --rail: min(1216px, calc(100% - 2 * var(--side))); --section: clamp(110px, 12vw, 190px); }
/* One scale for the serif, eight steps a third apart; every heading and serif line takes one of them.
   On a phone the same steps are smaller (see the end of this file), so no element keeps a size of its own. */
:root { --t1: clamp(19px, 1.6vw, 22px); --t2: clamp(22px, 2vw, 28px); --t3: clamp(28px, 2.6vw, 36px); --t4: clamp(32px, 3.3vw, 46px);
  --t5: clamp(38px, 4.1vw, 58px); --t6: clamp(44px, 5.1vw, 72px); --t7: clamp(52px, 7vw, 100px); --t8: clamp(58px, 8.7vw, 124px); }
/* Small text speaks in the text face, in sentence case: labels and buttons at 15px, fine print at 13px.
   The monospace is kept for what is really data: card codes, measurements, dates. */
:root { --label: 500 15px/1.35 var(--sans); --note: 400 13px/1.5 var(--sans); --data: 500 12px/1.4 var(--mono); }
.rail { width: var(--rail); margin-inline: auto; }
.home main { position: relative; }
.home main > section { position: relative; z-index: 1; }

/* ---- Shared marks: the shuttle, labels, links and buttons ---- */
.shuttle-icon { display: block; width: 44px; height: auto; overflow: visible; flex: none; }
.shuttle-body { fill: currentColor; }
.shuttle-bobbin { fill: var(--loom); }
.text-link { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font: var(--label); }
.text-link > span:first-child { padding-bottom: 6px; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat, repeating-linear-gradient(90deg, currentColor 0 5px, transparent 5px 9px) 0 100% / 100% 1px no-repeat; transition: background-size .45s cubic-bezier(.2,.7,.2,1); }
.text-link:focus-visible > span:first-child { background-size: 100% 1.5px, 100% 1px; }
.pill-button { position: relative; display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; padding: 0 22px 0 26px; background: var(--gold); color: #25261f; border-radius: 6px; font: var(--label); white-space: nowrap; transition: background .3s, transform .3s; }
.pill-button .shuttle-bobbin { fill: var(--gold); }
.pill-button .shuttle-icon { transition: transform .7s cubic-bezier(.12,.72,.32,1); }
.pill-button:focus-visible { background: #f0d67f; }
.pill-button:focus-visible .shuttle-icon { transform: translateX(8px); }

/* ---- Header: the monogram is a label sewn onto the cloth, the menu a selvedge band ---- */
/* The logo and the menu hold the two edges of the window at every width; only the text keeps to its column. */
.site-header { max-width: none; inset: 18px clamp(14px, 3vw, 40px) auto; }
.brand { --brand-h: 34px; padding: 9px 12px 10px; background: #f3eee3; color: #25261f; border-radius: 4px; box-shadow: 0 1px 0 #25261f14, 0 10px 26px -12px #11130e80; }
.on-light .brand, .project-page .brand { color: #25261f; }
.site-nav { gap: 2px; padding: 6px; border-radius: 6px; background: #f3eee3eb; box-shadow: 0 1px 0 #25261f14, 0 10px 26px -14px #11130e80; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-nav, html.js .menu-toggle { background: #f3eee3db; }
}
.site-nav a { position: relative; border-radius: 3px; padding: 10px 14px; font: var(--label); color: #25261f; }
.site-nav a[aria-current] { background: none; }
.site-nav a[aria-current]::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; border-bottom: 1.5px dashed currentColor; }
.site-nav a.nav-name { margin-left: 6px; padding-inline: 16px; background: var(--gold); color: #25261f; }
.site-nav a.nav-name[aria-current]::after { display: none; }
/* on a page of a group (a work, a service), that group's link is the way back to it */
.site-nav a.is-burada::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 6px; border-bottom: 1.5px dashed currentColor; }
.nav-dot { display: none; }
.site-nav a.nav-dil { margin-left: 4px; padding-inline: 12px; color: #5f5c51; }
.site-nav a.nav-dil::before { content: ''; position: absolute; left: -2px; top: 12px; bottom: 12px; border-left: 1px solid #25261f26; }
.nav-kartlar { position: relative; display: inline-flex; align-items: center; gap: 9px; padding: 10px 14px; border: 0; border-radius: 3px; background: none; font: var(--label); color: #25261f; cursor: pointer; }
/* a small punched card: the chain of every page */
.nav-kartlar::before { content: ''; width: 13px; height: 10px; border-radius: 1.5px; background: radial-gradient(circle at 3.5px 3.5px, #f3eee3 1.1px, #0000 1.4px), radial-gradient(circle at 8.5px 6.5px, #f3eee3 1.1px, #0000 1.4px), #25261f; clip-path: polygon(3px 0, 100% 0, 100% 100%, 0 100%, 0 3px); }
@media (hover: hover) and (pointer: fine) { .nav-kartlar:hover { background: #25261f0f; } }
@media (max-width: 1100px) {
  /* With the card chain, the menu button opens it and the navigation steps aside. */
  .kartli .site-nav { display: none; }
}
@keyframes dim-in { from { opacity: 0; } }
.js .menu-toggle { position: relative; font: var(--label); border-radius: 6px; color: #25261f; box-shadow: 0 1px 0 #25261f14, 0 10px 26px -12px #11130e80; }

/* ---- The opening: the loom room fills the screen; its selvedge is where the page begins ---- */
/* The opening loom and the footer's cloth run edge to edge on every screen, however wide. */
.home .hero { max-width: none; margin: 0; border-radius: 0; height: 100svh; min-height: 640px; max-height: 1100px; background: #363a2f; color: var(--paper); }
/* On very wide screens the loom keeps to the page's canvas, the same distance past the text
   column as on a 1920 screen, instead of drifting to the edge of the glass. */
@media (min-width: 1800px) { .home .hero-stage { right: max(4%, calc(50% - 883px)); } }
.home .hero-media { border-radius: 0; }
.home .hero-copy { top: 50%; transform: translateY(-46%); padding-inline: max(var(--side), calc(50% - 608px)); max-width: 720px; }
.hero-kicker { font: 400 17px/1.4 var(--sans); color: var(--gold); margin-bottom: 22px; }
.home .hero h1 { font-size: var(--t7); font-weight: 330; line-height: .92; letter-spacing: -.035em; color: #f6f1e6; }
.home .hero-description { max-width: 420px; margin-top: 30px; font-size: 17px; line-height: 1.6; color: #e9e3d4d9; }
.home .hero-action { gap: 18px; margin-top: 34px; padding: 0 0 10px; border-bottom: 1px dashed #e8c65a99; color: var(--gold); font: 500 17px/1.2 var(--sans); }
.home .hero-action .shuttle-icon { width: 46px; transition: transform .8s cubic-bezier(.12,.72,.32,1); }
.home .hero-action:focus-visible .shuttle-icon { transform: translateX(12px); }
.home .hero :focus-visible { outline-color: var(--gold); }
.hero-selvage { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 14px; background: repeating-conic-gradient(#e8c65a 0 25%, #3a3f33 0 50%) 0 0 / 12px 7px; box-shadow: 0 -1px 0 #1f231b; }

/* The opening in 3D (kaynak/acilis.js). With WebGL2 and motion allowed the hero gets room to scroll
   through: its frame stays pinned while the loom weaves and the camera moves, then the page goes on.
   The class is set before the first paint (assets/acilis-on.js), so the frame holds the room's dusk
   until the scene's first frame is ready and the canvas fades in; the SVG loom is never shown first.
   The heading is woven on the cloth (it stays in the page as text), and the words under it sit on the
   cloth's dark near edge, fading as the camera leaves. Anything failing removes the classes and the
   page is as written. */
.hero-pin { display: contents; }
.acilis-3b .home .hero { display: block; height: 300svh; min-height: 0; max-height: none; background: #2b2e26; }
.acilis-3b .home .hero-pin { display: flex; flex-direction: column; position: sticky; top: 0; height: 100svh; min-height: 520px; overflow: hidden; background: #2b2e26; }
/* past the room the frame leaves the layout, out of sight, so Safari lets the page run under its bars (acilis.js) */
.acilis-3b .home .hero.acilis-serbest .hero-pin { display: none; }
.acilis-tuval { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; opacity: 0; transition: opacity .6s cubic-bezier(.2,.7,.2,1); }
.acilis-hazir .acilis-tuval { opacity: 1; }
/* from the first paint the room is the loom room at dusk: the drawn loom never shows, the words sit
   where they will stay, and the heading is the one the loom weaves */
.acilis-3b .home .hero-media { display: none; }
.acilis-3b .home .hero-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; top: auto; transform: none; max-width: none; padding: 140px max(var(--side), calc(50% - 608px)) clamp(48px, 8svh, 84px); background: linear-gradient(0deg, #1b1d17e6, #1b1d17a6 48%, #1b1d1700); opacity: calc(1 - var(--acilis, 0) * 5); }
.acilis-3b .home .hero-copy > * { max-width: 460px; }
.acilis-3b .home .hero.acilis-ilerledi .hero-copy { visibility: hidden; }
.acilis-3b .home .hero h1 { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes acilis-kelime { from { opacity: 0; } }
/* The cue: scrolling weaves. A gold thread runs down beside it until the scroll begins. */
.acilis-ipucu { display: none; }
.acilis-hazir .home .acilis-ipucu { position: absolute; z-index: 2; right: max(var(--side), calc(50% - 608px)); bottom: clamp(48px, 8svh, 84px); display: flex; align-items: center; gap: 14px; margin: 0; font: var(--label); color: #e9e3d4b3; opacity: calc(1 - var(--acilis, 0) * 12); animation: acilis-kelime 1.1s 1.6s cubic-bezier(.2,.7,.2,1) both; }
.acilis-ipucu-iplik { position: relative; width: 1px; height: 38px; overflow: hidden; background: #e8c65a33; }
.acilis-ipucu-iplik::after { content: ''; position: absolute; left: 0; top: -40%; width: 1px; height: 40%; background: var(--gold); animation: acilis-iplik 2.4s cubic-bezier(.6,0,.4,1) infinite; }
@keyframes acilis-iplik { to { top: 100%; } }
html[data-motion='paused'] .acilis-ipucu-iplik::after { animation: none; top: 30%; }
@media (max-width: 767px) { .acilis-hazir .home .acilis-ipucu { display: none; } }

/* ---- Section rhythm ---- */
.section-head { display: grid; gap: 24px; margin-bottom: clamp(40px, 5vw, 70px); }
.section-head h2, .statement-title { font-size: var(--t7); line-height: .92; letter-spacing: -.035em; }
.section-head .section-note { max-width: 560px; font-size: 17px; color: var(--muted); }
.statement, .works, .services, .threads, .story, .toy, .about, .notes, .contact { margin-top: var(--section); }
[data-thread="weave"] { position: relative; }

/* ---- Introduction: the words come up in ink as the reader reaches them ---- */
.statement { padding-top: 12px; }
.statement-text { max-width: 23em; margin-top: clamp(40px, 5vw, 72px); font: 340 var(--t4)/1.16 var(--serif); letter-spacing: -.015em; }
.statement-text .w { transition: color .45s ease; }
.statement-text.is-split .w { color: #25261f3d; }
.statement-text.is-split .w.is-on { color: var(--ink); }
.epigraph { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; margin: clamp(56px, 7vw, 100px) 0 0; padding-top: 26px; border-top: 1px dashed var(--line); }
.epigraph blockquote { margin: 0; font: 360 var(--t2)/1.3 var(--serif); }
.epigraph figcaption { font-size: 15px; color: var(--muted); }
.epigraph-who { display: block; margin-bottom: 6px; font: var(--label); color: var(--gold-ink); }

/* ---- Work: fabric swatches cut with pinking shears, each with its paper tag ---- */
.swatches { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 2.4vw, 34px); align-items: start; }
.swatch-link { display: block; }
/* A sample is turned a little, shadowed and pinked all at once. Safari redraws such an element on every
   scrolled frame while it is anywhere near the screen, unless it has a layer of its own to keep. */
.swatch-cloth { --tooth: 12px; position: relative; aspect-ratio: 1; filter: drop-shadow(0 18px 18px #25261f2e); transition: transform .7s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.swatch-svg, .swatch-cloth > .dokunan-tuval, .case-cloth > .dokunan-tuval { display: block; width: 100%; height: 100%;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x;
  mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--tooth) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--tooth) 51% repeat-x; }
/* Woven artworks (kaynak/dokunan-gorseller.js): the canvas lies over the drawing and fades in once its
   first frame is ready; words kept on the page (data-dokuma="atla") stay above it. */
[data-dokunan] { position: relative; }
.dokunan-tuval { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; transition: opacity .7s cubic-bezier(.2,.7,.2,1); touch-action: pan-y; }
.dokundu > .dokunan-tuval { opacity: 1; }
.dokundu > [data-dokuma='atla'] { z-index: 2; }
/* the back of a woven cloth is its mirror image */
html[data-side='ters'] .dokunan-tuval { transform: scaleX(-1); }
.swatch:nth-child(1) .swatch-cloth { rotate: -1.2deg; }
.swatch:nth-child(2) .swatch-cloth { rotate: 1.4deg; margin-top: 40px; }
.swatch:nth-child(3) .swatch-cloth { rotate: -.6deg; margin-top: 40px; }
.swatch-sheen { transform: translateX(-30%); transition: transform 1.2s cubic-bezier(.2,.7,.2,1); }
.swatch-tag { position: relative; margin: -34px 18px 0; padding: 22px 22px 24px; background: #fbf8f1; border-radius: 3px; box-shadow: 0 1px 0 #25261f14, 0 16px 30px -22px #25261f66; }
.swatch-tag::before { content: ''; position: absolute; inset: 6px; border: 1px dashed #25261f40; border-radius: 2px; pointer-events: none; }
.swatch-no { font: var(--note); color: var(--muted); }
.swatch-tag h3 { margin: 12px 0 10px; font-size: var(--t4); }
.swatch-tag p:not(.swatch-no) { font-size: 15px; line-height: 1.55; color: var(--muted); }
.swatch-specs { display: grid; gap: 6px; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); font: var(--note); }
.swatch-specs div { display: flex; justify-content: space-between; gap: 12px; }
.swatch-specs dt { color: var(--muted); }
.swatch-specs dd { margin: 0; text-align: right; }
.swatch-link:focus-visible .swatch-cloth { transform: translateY(-8px) rotate(-1deg); }
.swatch-link:focus-visible .swatch-sheen { transform: translateX(30%); }

/* ---- Services: three weaves; the draft weaves itself row by row when it comes into view ---- */
.weaves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-block: 1px solid var(--line); }
.weave-card { display: flex; flex-direction: column; min-width: 0; padding: 36px clamp(20px, 2.6vw, 38px) 38px; scroll-margin-top: 110px; }
.weave-card:first-child { padding-left: 0; }
.weave-card:last-child { padding-right: 0; }
.weave-card + .weave-card { border-left: 1px dashed var(--line); }
.weave-card--kimlik { --thread: var(--madder); }
.weave-card--profesyonel { --thread: var(--indigo); }
.weave-card--yayin { --thread: #c99a2e; }
.weave-draft { width: min(100%, 236px); margin-bottom: 28px; }
.draft-svg { display: block; width: 100%; height: auto; overflow: visible; }
.draft-bare { stroke: #25261f38; stroke-width: 1.4; }
.draft-warp { fill: #3b3d33; }
.draft-weft { fill: var(--thread); }
.js .weave-draft:not(.is-woven) .draft-row { opacity: 0; transform: translateX(-10px); }
.weave-draft.is-woven .draft-row { transition: opacity .35s ease, transform .5s cubic-bezier(.12,.72,.32,1); }
.weave-draft.is-woven g:nth-of-type(2) { transition-delay: .09s; }
.weave-draft.is-woven g:nth-of-type(3) { transition-delay: .18s; }
.weave-draft.is-woven g:nth-of-type(4) { transition-delay: .27s; }
.weave-draft.is-woven g:nth-of-type(5) { transition-delay: .36s; }
.weave-draft.is-woven g:nth-of-type(6) { transition-delay: .45s; }
.weave-draft.is-woven g:nth-of-type(7) { transition-delay: .54s; }
.weave-draft.is-woven g:nth-of-type(8) { transition-delay: .63s; }
.weave-name { display: flex; gap: 10px; align-items: baseline; font: var(--label); color: var(--muted); }
.weave-name span { color: var(--ink); }
.weave-name::before { content: ''; align-self: center; width: 22px; height: 4px; border-radius: 2px; background: var(--thread); }
.weave-card h3 { margin: 14px 0 12px; font-size: var(--t5); }
.weave-lead { margin-bottom: 26px; font: 360 var(--t1)/1.35 var(--serif); }
.weave-card ul { margin: 0 0 30px; padding: 0; list-style: none; font-size: 15px; color: var(--muted); }
.weave-card li + li { margin-top: 18px; }
.weave-card li strong { display: block; margin-bottom: 4px; font-weight: 600; color: var(--ink); }
.weave-card .text-link { margin-top: auto; align-self: start; }
@media (min-width: 1024px) {
  @supports (grid-template-rows: subgrid) {
    .weaves { grid-template-rows: repeat(6, auto); }
    .weave-card { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; }
    .weave-card .text-link { align-self: end; }
  }
}

/* The care label sewn into every piece */
.care { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 30px 56px; align-items: end; margin-top: 46px; }
.care-label { position: relative; padding: 30px 34px 26px; background: #fbf8f1; border-radius: 3px; box-shadow: 0 1px 0 #25261f14, 0 18px 34px -24px #25261f73; }
.care-label::before { content: ''; position: absolute; inset: 7px; border: 1px dashed #25261f40; border-radius: 2px; pointer-events: none; }
.care-label h3 { margin-bottom: 18px; font: 600 15px/1.35 var(--sans); }
.care-label ul { columns: 2; column-gap: 40px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.care-label li { position: relative; break-inside: avoid; margin-bottom: 12px; padding-left: 24px; }
/* Each line is tacked on with a short running stitch of gold thread: a tick, sewn. */
.care-label li::before { content: ''; position: absolute; left: 0; top: calc(.78em - 8px); width: 17px; height: 15px; background: var(--gold-ink); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'%3E%3Cpath d='M1.6 8.4 6 12.8 15.4 2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='2.6 3.3' stroke-dashoffset='.98'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 15'%3E%3Cpath d='M1.6 8.4 6 12.8 15.4 2' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round' stroke-dasharray='2.6 3.3' stroke-dashoffset='.98'/%3E%3C/svg%3E") center / contain no-repeat; }
.care-terms { font: var(--note); color: var(--muted); }
@media (min-width: 1024px) {
  /* The fine print of the care label hangs beside it as a margin note, level with its heading. */
  .care { align-items: start; }
  .care-terms { margin-top: 30px; padding-left: 24px; border-left: 1px dashed var(--line); }
}

/* Three spools for three professions */
.spools { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 6vw, 84px); border-block: 1px solid var(--line); }
@media (min-width: 768px) and (max-width: 1100px) {
  .spools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spool:nth-child(odd) { padding-left: 0; border-left: 0; }
  .spool:nth-child(n + 3) { border-top: 1px dashed var(--line); }
}
.spool { display: flex; align-items: center; gap: 22px; min-height: 128px; padding: 24px 24px 24px 0; }
.spool + .spool { padding-left: 28px; border-left: 1px dashed var(--line); }
.spool--psikolog { --thread: var(--indigo); }
.spool--avukat { --thread: var(--walnut); }
.spool--hekim { --thread: var(--madder); }
.spool--diger { --thread: var(--loom); }
.spool-icon { position: relative; flex: none; width: 36px; height: 52px; margin-block: 8px; border-radius: 3px; background: repeating-linear-gradient(170deg, var(--thread) 0 3px, #0000002e 3px 4px, var(--thread) 4px 6px) 0 0 / 100% 12px, var(--thread); transition: background-position 1.2s linear; }
.spool-icon::before, .spool-icon::after { content: ''; position: absolute; left: -6px; right: -6px; height: 6px; border-radius: 2px; background: #c9ae84; box-shadow: inset 0 -1px 0 #0000002e; }
.spool-icon::before { top: -6px; }
.spool-icon::after { bottom: -6px; }
.spool-text { display: grid; font: 360 var(--t2)/1.15 var(--serif); }
.spool-kind { margin-bottom: 4px; font: var(--note); color: var(--muted); }
.spool-text { transition: color .3s; }
.spool:focus-visible .spool-text { color: var(--gold-ink); }
.spool:focus-visible .spool-icon { background-position: 0 48px; }

/* ---- Process: the card reader; the punched cards pass under its scan line ---- */
.home .approach { margin-top: var(--section); background: var(--loom); border-radius: 6px; color: #f3eee3; }
.pin .home .approach, .home.pin .approach, html.pin .home .approach { background: none; }
/* Only the unpinned frame needs to be positioned here: once pinned it is sticky, which already
   holds the inset border below, and a plain `relative` at this weight would unpin it. */
html:not(.pin) .home .approach-frame { position: relative; }
.pin .approach-frame, .pin-mobile .approach-frame { background: var(--loom) !important; border-radius: 6px !important; }
.home .approach-frame::before { content: ''; position: absolute; inset: 12px; z-index: 0; border: 1px solid #e8c65a26; border-radius: 3px; pointer-events: none; }
.home .approach-layout { position: relative; z-index: 1; }
.reader-label, .approach-intro > p.reader-label { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; font: var(--label); color: var(--gold); }
.reader-led { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px #e8c65a; }
.home .approach-intro h2 { color: #f6f1e6; font-size: var(--t6); line-height: .95; }
.home .approach-intro > p:not(.reader-label) { max-width: 400px; margin-top: 26px; font-size: 15px; color: #e9e3d4b3; }
.home .principle-nav a { border-color: #e9e3d44d; color: #f3eee3; font: var(--data); }
.home .principle-nav a[aria-current] { background: var(--gold); border-color: var(--gold); color: #25261f; }
.home .principle-nav > span { font: var(--data); color: #e9e3d4b3; }
.principle-step.punch-card { aspect-ratio: auto; display: block; min-height: auto; padding: 26px 30px 30px; border-radius: 3px; background: #ebe1cb; color: #25261f; text-align: left; clip-path: polygon(22px 0, 100% 0, 100% 100%, 0 100%, 0 22px); transition: background .5s, box-shadow .5s; }
.principle-step.punch-card.is-active { background: #f5ecd7; }
.punch-svg { display: block; width: min(100%, 250px); height: auto; overflow: visible; }
.punch-lace { fill: var(--loom); }
.punch-dots { stroke: #25261f3d; stroke-width: 2.6; stroke-linecap: round; }
.punch-holes { fill: var(--loom); transition: fill .5s; }
.punch-card.is-active .punch-holes { fill: #e2b33c; }
.punch-letters text { font: 500 8px var(--mono); fill: #25261f80; text-anchor: middle; transition: fill .4s; }
.punch-card.is-active .punch-letters text { fill: #25261f; }
.principle-step p.punch-code, .punch-code { margin: 18px 0 8px; font: var(--data); color: #5f5c51; }
.punch-text h3 { margin-bottom: 10px; font-size: var(--t5); }
.punch-text p { max-width: 36ch; font-size: 15px; line-height: 1.55; }
.pin .principle-step.punch-card { width: min(100%, 520px); aspect-ratio: auto; min-height: auto; padding: 26px 30px 30px; }
.pin .principle-list, .pin-mobile .principle-list { grid-auto-rows: max-content; }
/* The scan line of the reader: the cards pass under it and light up while they are read. */
.pin .principle-window { position: relative; }
@media screen and (min-width: 1024px) {
  .pin .home .approach-layout::after, .home.pin .approach-layout::after { content: none; }
  .pin .approach-frame::after { content: ''; position: absolute; z-index: 0; left: 50%; right: 12px; top: 50%; height: 1px; background: linear-gradient(90deg, #e8c65a00, #e8c65acc 20%, #e8c65acc 80%, #e8c65a00); box-shadow: 0 0 14px #e8c65a99; pointer-events: none; }
  /* Cards rise out of the dark of the frame and sink back into it, so the one being read stands
     alone and none of them slides under the menu or the gauge. The intro sits inside the clear band. */
  .pin .approach-layout { -webkit-mask-image: linear-gradient(#0000, #000 112px, #000 calc(100% - 112px), #0000); mask-image: linear-gradient(#0000, #000 112px, #000 calc(100% - 112px), #0000); }
}

/* ---- Five threads: each pulled across the page when it is reached ---- */
.threads { overflow-x: clip; }
.thread-list { margin: 0 auto; padding: 0; list-style: none; }
.thread-item { position: relative; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 10px 56px; align-items: end; padding: 38px 0 34px; }
.thread-item--madder { --c: var(--madder); }
.thread-item--indigo { --c: var(--indigo); }
.thread-item--gold { --c: #c99a2e; }
.thread-item--walnut { --c: var(--walnut); }
.thread-item--loom { --c: var(--loom); }
.thread-line { position: absolute; top: 0; left: calc(50% - 50vw); width: 100vw; height: 6px; border-radius: 3px; background: repeating-linear-gradient(118deg, var(--c) 0 5px, color-mix(in srgb, var(--c), #000 28%) 5px 7px); transform-origin: 0 50%; transition: transform 1.1s cubic-bezier(.2,.7,.2,1); }
.js .thread-item:not(.is-drawn) .thread-line { transform: scaleX(0); }
.thread-item h3 { font-size: var(--t4); }
.thread-item p { max-width: 46ch; font-size: 17px; color: var(--muted); }
/* The list is closed by a plain thread running edge to edge, like the coloured ones above it. */
.thread-item:last-child::after { content: ''; position: absolute; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 1px; background: var(--line); }

/* ---- About: warp and weft ---- */
.about-grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.warp-weft { margin: 0; }
.warp-weft-svg { display: block; width: 100%; height: auto; overflow: visible; }
.ww-warp { fill: none; stroke: #2f332a; stroke-width: 13; stroke-linecap: round; }
.ww-over { stroke-linecap: butt; }
.ww-weft { fill: none; stroke: var(--madder); stroke-width: 13; stroke-linecap: round; }
.ww-sheen { fill: none; stroke: #fff; stroke-opacity: .14; stroke-width: 2; }
.ww-label { font: 400 13px var(--sans); fill: var(--muted); }
.ww-arrow { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.warp-weft { max-width: 460px; }
.warp-weft figcaption { margin-top: 18px; font: var(--note); color: var(--muted); }
.about-copy .about-lead { margin: 0 0 22px; font: 360 var(--t2)/1.25 var(--serif); }
.about-copy p:not(.about-lead) { max-width: 54ch; color: var(--muted); }

/* ---- Questions: every answer unties a knot ---- */
.notes-list.rail { width: min(1000px, var(--rail)); margin-left: calc((100% - var(--rail)) / 2); }
.notes-list { border-top: 1px solid var(--line); }
.note summary { display: grid; grid-template-columns: 58px minmax(0, 1fr); align-items: center; gap: 16px; padding: 24px 0; }
.note summary h3 { font-size: var(--t2); line-height: 1.15; letter-spacing: -.015em; }
.knot svg { display: block; width: 46px; height: 25px; overflow: visible; }
.knot path { fill: none; stroke: var(--madder); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; }
.knot-tied { stroke-dashoffset: 0; transition: stroke-dashoffset .6s ease; }
.knot-free { stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
.note[open] .knot-tied { stroke-dashoffset: 1; }
.note[open] .knot-free { stroke-dashoffset: 0; transition-delay: .3s; }
.note summary:focus-visible .knot path { stroke: var(--ink); }
.note-body { max-width: 68ch; padding: 0 0 28px 74px; font-size: 17px; color: var(--muted); }
.notes-list > .text-link { margin-top: 18px; }

/* ---- Contact: the thread ends in a knot at the button ---- */
.contact { padding-bottom: clamp(110px, 12vw, 180px); }
.home .contact { display: block; padding-inline: 0; background: none; border-radius: 0; }
.contact h2 { font-size: var(--t8); line-height: .9; letter-spacing: -.04em; }
.contact-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px 60px; align-items: end; margin-top: clamp(36px, 4vw, 60px); }
.contact-copy { max-width: 32ch; font: 360 var(--t2)/1.35 var(--serif); }
.contact-actions { display: grid; justify-items: start; gap: 18px; }
.contact .contact-primary { min-height: 64px; gap: 28px; padding: 0 24px 0 28px; font: 500 17px/1.2 var(--sans); }

/* ---- Footer: the cloth ends in a fringe over the loom-room floor ---- */
.site-footer { position: relative; max-width: none; margin: 0; padding: 0; border-radius: 0; background: var(--loom); color: #f3eee3; overflow: visible; }
.project-page .site-footer { margin-top: 64px; }
.fringe { position: absolute; left: 0; top: 10px; width: 100%; height: 70px; overflow: visible; pointer-events: none; }
/* The cloth's last woven band, the heading, before the fringe hangs free. */
.site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: repeating-conic-gradient(#e7dfcd 0 25%, #c9bfa8 0 50%) 0 0 / 10px 5px; }
.fringe-tassel { transform-box: fill-box; transform-origin: 50% 0; }
.fringe-tassel path { fill: none; stroke: #e7dfcd; stroke-width: 1.4; stroke-linecap: round; }
.fringe-tassel circle { fill: #e7dfcd; }
.footer-inner { width: var(--rail); margin-inline: auto; padding: clamp(110px, 11vw, 150px) 0 96px; }
.footer-name { margin: 0 0 clamp(40px, 5vw, 70px); font: 330 clamp(56px, 12vw, 190px)/.9 var(--serif); letter-spacing: -.04em; text-align: left; white-space: normal; color: var(--gold); }
.footer-name.is-woven .footer-name-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.woven-name { display: block; width: 100%; height: auto; overflow: visible; }
.woven-warp { stroke: #ffffff12; stroke-width: 1; }
.woven-float { fill: #e8c65a; }
.woven-bind { stroke: #2f332a; stroke-width: 1.4; stroke-linecap: round; }
.site-footer .footer-top { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 40px; padding-top: 26px; border-top: 1px dashed #e9e3d438; }
.footer-tag { font: var(--label); color: var(--gold); }
.site-footer .footer-top nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-size: 15px; }
.site-footer .footer-top a { padding-block: 10px; color: #f3eee3; }
.site-footer .footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px 30px; margin-top: 30px; padding-top: 0; border-top: 0; font: var(--note); letter-spacing: 0; text-transform: none; color: #e9e3d4b3; }
.site-footer .footer-bottom > span:nth-child(2) { display: inline; }
.site-footer .back-top { color: #f3eee3; }

/* ---- Inner pages: the same cloth, each profession on its own thread ---- */
.iplik-indigo { --thread: var(--indigo); }
.iplik-walnut { --thread: var(--walnut); }
.iplik-madder { --thread: var(--madder); }
.iplik-loom { --thread: var(--loom); }
.back-link { position: relative; gap: 14px; padding: 13px 18px; border-radius: 6px; background: #f3eee3; color: #25261f; font: var(--label); box-shadow: 0 1px 0 #25261f14, 0 10px 26px -14px #11130e80; }
.project-intro h1 { font-size: var(--t8); font-weight: 330; letter-spacing: -.035em; }
.article-page .project-intro h1 { font-size: var(--t7); }
.story-heading h2 { font-size: var(--t6); }
.project-contact h2, .article-body h2 { font-size: var(--t4); }
.article-body h3, .article-body .article-callout h2 { font-size: var(--t3); }
.breadcrumb { align-items: baseline; font: var(--note); }
.project-contact p { font-size: 15px; }
.article-body p, .article-body li { font-size: 17px; }
.thread-name { display: flex; align-items: center; gap: 12px; }
.thread-dot { width: 28px; height: 5px; border-radius: 3px; background: repeating-linear-gradient(118deg, var(--thread) 0 4px, color-mix(in srgb, var(--thread), #000 28%) 4px 6px); }
[class*='iplik-'] .project-intro { position: relative; padding-bottom: 46px; }
[class*='iplik-'] .project-intro::after { content: ''; position: absolute; bottom: 0; left: calc(50% - 50vw); width: 100vw; height: 6px; border-radius: 3px; background: repeating-linear-gradient(118deg, var(--thread) 0 5px, color-mix(in srgb, var(--thread), #000 28%) 5px 7px); }
[class*='iplik-'] main { overflow-x: clip; }
[class*='iplik-'] .article-body h2::before { content: ''; display: block; width: 34px; height: 4px; margin-bottom: 18px; border-radius: 2px; background: var(--thread); }
.next-thread { width: min(1216px, calc(100% - 144px)); margin: 80px auto 0; }
.next-thread a { display: grid; gap: 10px; padding: 34px 0 30px; border-block: 1px dashed var(--line); }
.next-kind { font: var(--label); color: var(--muted); }
.next-title { font: 330 var(--t6)/.95 var(--serif); letter-spacing: -.035em; transition: color .3s; }
.next-thread a:focus-visible .next-title { color: var(--gold-ink); }
@media (hover: hover) and (pointer: fine) { .next-thread a:hover .next-title { color: var(--gold-ink); } .back-link:hover { background: var(--gold); } }
@media (max-width: 1100px) { .next-thread { width: calc(100% - 96px); } }
@media (max-width: 767px) { .next-thread { width: calc(100% - 56px); margin-top: 56px; } }

/* ---- The case study: its cover is the loom's own cloth; its log is the real order of work ---- */
.case-cover { width: min(1216px, calc(100% - 144px)); margin: 70px auto 0; }
.project-cover.case-cover > .case-cloth { width: min(100%, 500px); aspect-ratio: 1; margin-inline: auto; border-radius: 0; filter: drop-shadow(0 22px 22px #25261f33); rotate: -1deg; will-change: transform; }
.case-cover figcaption { max-width: 520px; margin: 26px auto 0; padding: 0; text-align: center; font: var(--note); color: var(--muted); }
.weave-log { margin: 0; padding: 37px 0 0; list-style: none; }
.weave-log li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 24px; padding: 18px 0; border-top: 1px dashed var(--line); }
.weave-log li:last-child { border-bottom: 1px dashed var(--line); }
.weave-log time { font: var(--data); line-height: 1.7; color: var(--gold-ink); }
.weave-log p { font-size: 15px; }
@media (max-width: 767px) { .case-cover { width: calc(100% - 56px); } .weave-log li { grid-template-columns: 1fr; } }

/* ---- Inner pages in the home page's cloth: mounted samples, sewn labels, one voice for small print ---- */
/* Work shown large hangs like a mounted sample on the text column, with square corners. */
.project-cover:not(.case-cover) { width: min(1216px, calc(100% - 144px)); max-width: none; margin: 60px auto 0; }
.project-cover:not(.case-cover) > div, .gallery-panel > div { border-radius: 3px; box-shadow: 0 1px 0 #25261f14, 0 22px 34px -26px #25261f80; }
.project-cover:not(.case-cover) figcaption, .gallery-panel figcaption { padding: 16px 0 0; font: var(--note); color: var(--muted); }
.art-caption, .project-cover .art-caption { font: var(--note); letter-spacing: 0; text-transform: none; }
.eyebrow { font: var(--label); letter-spacing: 0; text-transform: none; }
/* Facts of the work: four equal columns, each a small label over its value. */
.project-facts { border-top: 1px dashed var(--line); }
.project-facts dl { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.project-facts dt { margin-bottom: 6px; font: var(--note); letter-spacing: 0; text-transform: none; color: var(--muted); }
.project-facts dd { font-size: 15px; }
/* Decisions and asides are cards on the page; only the care label and the swatch tags are sewn on. */
.decision-card, .article-body .article-callout { position: relative; border-radius: 3px; background: #fbf8f1; box-shadow: 0 1px 0 #25261f14, 0 18px 34px -24px #25261f73; }
.decision-card h3 { margin: 30px 0 16px; font-size: var(--t3); }
.decision-card > p:last-child { font-size: 15px; }
html[data-side='ters'] :is(.decision-card, .article-body .article-callout) { background: #232a3a; }
@media (max-width: 767px) {
  .project-cover:not(.case-cover) { width: calc(100% - 56px); margin-top: 36px; }
  .project-facts dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- 404: a broken thread the visitor can tie again ---- */
.broken-thread { width: min(1216px, calc(100% - 144px)); margin: 70px auto 0; }
.not-found .broken-thread { width: auto; margin: 44px 0 0; }
.not-found .not-found-links { margin-top: 30px; }
.bt-svg { display: block; width: 100%; height: auto; overflow: visible; }
.bt-edge { fill: none; stroke: #7a5c12; stroke-width: 7; stroke-linecap: round; }
.bt-core { fill: none; stroke: #e2b33c; stroke-width: 4; stroke-linecap: round; }
.bt-fray { fill: none; stroke: #c99a2e; stroke-width: 1.6; stroke-linecap: round; transition: opacity .3s; }
.bt-knot { fill: none; stroke: #e2b33c; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s ease .2s; }
.bt-handle { fill: #e8c65a2e; stroke: #7a5c12; stroke-width: 1.4; stroke-dasharray: 3 4; cursor: grab; touch-action: none; transition: opacity .3s; }
html:not(.js) .bt-handle { display: none; }
.bt-peg { fill: #6a4b33; stroke: #46321f; stroke-width: 2; }
.bt-fray { transform-box: view-box; }
.broken-thread.is-dragging .bt-handle { cursor: grabbing; }
.broken-thread.is-tied .bt-knot { stroke-dashoffset: 0; }
.broken-thread.is-tied .bt-fray, .broken-thread.is-tied .bt-handle { opacity: 0; }
.broken-thread figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 22px; font: var(--label); color: var(--muted); }
.broken-tie { min-height: 44px; padding: 0; background: none; color: var(--ink); }
@media (max-width: 767px) {
  /* On a phone the drawing is shown from its middle, larger: the break reads at a glance and the loose
     end is big enough to take with a thumb. Both ends run on past the edges of the screen. */
  .not-found .broken-thread { overflow-x: clip; }
  .not-found .bt-svg { width: 160%; max-width: none; margin-left: -30%; }
  .bt-edge { stroke-width: 9; } .bt-core { stroke-width: 5.5; } .bt-knot { stroke-width: 5.5; } .bt-fray { stroke-width: 2.4; } .bt-handle { r: 44px; }
}

/* ---- The weft: drawn under the page, and over every other letter where it crosses a heading ---- */
.thread { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.thread--under { z-index: 0; }
.thread--over { z-index: 3; }
.thread-edge, .thread-core { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.thread-edge { stroke: var(--iplik-kenar, #7a5c12); stroke-width: 4.6; }
.thread-core { stroke: var(--iplik-cekirdek, #e2b33c); stroke-width: 2.6; }
.thread-tip path { fill: var(--iplik-cekirdek, #e2b33c); stroke: var(--iplik-kenar, #7a5c12); stroke-width: 1.2; }
.thread-tip rect { fill: #2f332a; }
.thread-knot { fill: none; stroke: var(--iplik-cekirdek, #e2b33c); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .8s ease; }
.thread.is-tied .thread-knot { stroke-dashoffset: 0; }

/* ---- The loom's gauge: two switches; on the back of the cloth also how the page was served ---- */
.loom-hud { position: fixed; left: 50%; bottom: 14px; z-index: 40; display: flex; align-items: center; gap: 4px; max-width: calc(100% - 20px); padding: 5px; border-radius: 8px; background: #2f332aeb; color: #f3eee3; font: 500 13px/1 var(--sans); translate: -50% 0; box-shadow: 0 12px 30px -12px #11130e99, inset 0 0 0 1px #f3eee31f; }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .loom-hud { background: #2f332ae0; -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); }
}
.loom-hud[hidden] { display: none; }
.loom-hud p { margin: 0; }
/* The skip link keeps dark ink on its yellow in both faces of the cloth. */
.skip-link { color: #25261f; }
/* Whatever the keyboard or a link brings into view stops above the gauge, never under it. */
html { scroll-padding-bottom: 88px; }
/* The gauge waits below the opening screen and rises once the weaving has begun; focus brings it up at once. */
.loom-hud { transition: transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s; }
/* Only keyboard focus holds it in view: a button clicked with the mouse keeps focus, and must not pin it. */
.js .loom-hud:not(.is-shown):not(:has(:focus-visible)), .js .loom-hud.is-tucked:not(:has(:focus-visible)) { transform: translateY(calc(100% + 24px)); opacity: 0; }
@supports not selector(:has(*)) {
  .js .loom-hud:not(.is-shown):not(:focus-within), .js .loom-hud.is-tucked:not(:focus-within) { transform: translateY(calc(100% + 24px)); opacity: 0; }
}
.hud-perf { display: none; padding: 0 10px 0 12px; font: var(--data); color: #e9e3d4de; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-side='ters'] .hud-perf:not(:empty) { display: block; }
.loom-hud .hud-button { display: flex; align-items: center; gap: 8px; min-height: 38px; white-space: nowrap; padding: 0 12px; border-radius: 5px; background: #ffffff10; color: #f3eee3; font: inherit; letter-spacing: inherit; text-transform: inherit; transition: background .25s, color .25s; }
.loom-hud .hud-button[aria-pressed='true'] { background: var(--gold); color: #25261f; }
.loom-hud .hud-button:focus-visible { outline-color: var(--gold); outline-offset: 2px; }
.side-icon { width: 12px; height: 12px; border: 1.5px solid currentColor; border-radius: 2px; background: linear-gradient(135deg, currentColor 0 50%, transparent 50%); }
.loom-hud .motion-icon { color: currentColor; }

/* ---- The other side of the cloth: the same page, turned over to show how it is made ---- */
html[data-side='ters'] { --paper: #1b2130; --ink: #efe9dc; --muted: #a9b0bf; --line: #3a4458; --cream: #232a3a; --gold-ink: #e8c65a; }
html[data-side='ters'] body { background: var(--paper); }
html[data-side='ters'] body::before { content: ''; position: fixed; inset: 0; z-index: 28; pointer-events: none; background: linear-gradient(90deg, #e8c65a14 1px, transparent 1px) calc(50% - 608px) 0 / calc(1216px / 12) 100%, linear-gradient(#ffffff08 1px, transparent 1px) 0 0 / 100% 8px; }
html[data-side='ters'] .swatch-tag, html[data-side='ters'] .care-label { background: #232a3a; }
html[data-side='ters'] .statement-text.is-split .w { color: var(--ink); }
html[data-side='ters'] .draft-row, html[data-side='ters'] .thread-line { opacity: 1 !important; transform: none !important; }
html[data-side='ters'] .draft-warp, html[data-side='ters'] .ww-warp { fill: #cfc8b8; stroke: #cfc8b8; }
html[data-side='ters'] .ww-warp:not(.ww-over) { fill: none; }
html[data-side='ters'] .ww-over { fill: none; }
html[data-side='ters'] .site-nav, html[data-side='ters'] .brand { box-shadow: 0 0 0 1px #e8c65a66; }
/* The process frame is part of the cloth, so it turns over with it. */
html[data-side='ters']:not(.pin) .home .approach, html[data-side='ters'].pin .approach-frame { background: #232a3a !important; }
/* Tags ride a fixed layer under the menu bar and the gauge; each marked element carries its own dashed
   outline, so the outline moves with it and a keyboard focus ring always wins over it. */
.spec-layer { position: fixed; inset: 0; z-index: 29; overflow: hidden; pointer-events: none; }
.spec-tag { position: absolute; left: 0; top: 0; padding: 3px 7px; border-radius: 3px; background: #e8c65a; color: #1b2130; font: 500 10px/1.3 var(--mono); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 4px 14px -6px #0009; will-change: transform; }
html[data-side='ters'] .spec-on:not(:focus-visible) { outline: 1px dashed #e8c65a8c; outline-offset: 3px; }

/* ---- Turning the cloth over (the reverse side): the page turns on its vertical axis ---- */
html.is-turning::view-transition-old(root) { animation: .32s cubic-bezier(.55,0,1,.45) both turn-out; }
html.is-turning::view-transition-new(root) { animation: .42s cubic-bezier(0,.55,.45,1) both turn-in; }
@keyframes turn-out { to { transform: perspective(1600px) rotateY(88deg); opacity: .4; } }
@keyframes turn-in { from { transform: perspective(1600px) rotateY(-88deg); opacity: .4; } }

/* ---- High contrast: colours are the system's, so every card keeps an edge of its own ---- */
@media (forced-colors: active) {
  .principle-step.punch-card, .decision-card, .care-label, .swatch-tag, .article-body .article-callout { border: 1px solid CanvasText; }
}

/* ---- Hover belongs to a mouse or trackpad ---- */
@media (hover: hover) and (pointer: fine) {
  .text-link:hover > span:first-child { background-size: 100% 1.5px, 100% 1px; }
  .pill-button:hover { background: #f0d67f; }
  .pill-button:hover .shuttle-icon { transform: translateX(8px); }
  .home .hero-action:hover .shuttle-icon { transform: translateX(12px); }
  .site-nav a:hover { background: #25261f0f; }
  .site-nav a.nav-name:hover { background: #f0d67f; }
  .swatch-link:hover .swatch-cloth { transform: translateY(-8px) rotate(-1deg); }
  .swatch-link:hover .swatch-sheen { transform: translateX(30%); }
  .spool:hover .spool-icon { background-position: 0 48px; }
  .spool:hover .spool-text { color: var(--gold-ink); }
  .note summary:hover .knot path { stroke: var(--ink); }
  .loom-hud .hud-button:hover { background: #ffffff21; }
  .loom-hud .hud-button[aria-pressed='true']:hover { background: #f0d67f; }
}

/* ---- Smaller screens ---- */
@media (max-width: 1100px) {
  .swatches { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .swatch--site { grid-column: 1 / -1; display: grid; }
  .swatch--site .swatch-link { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 0 34px; }
  .swatch--site .swatch-tag { margin: 0; }
  .swatch:nth-child(2) .swatch-cloth { margin-top: 0; }
}
@media (max-width: 1023px) {
  .home .hero { display: grid; grid-template-rows: auto auto; height: auto; min-height: 0; max-height: none; background: #363a2f; color: var(--paper); }
  /* The loom's stage is sized in container units, so its room needs a definite height of its own. */
  .home .hero-media { height: clamp(300px, calc(100svh - 430px), 560px); min-height: 0; }
  .home .hero-copy { top: auto; transform: none; max-width: none; padding: 30px var(--side) 52px; }
  .home .hero .hero-description { color: #e9e3d4d9; }
  .home .hero-action { max-width: none; }
}
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 501px) {
  /* The loom stands in the room between the monogram and the menu button. Both keep 3vw from the
     edge, so that room is centred 66px left of the middle at every tablet width. */
  .home .hero-stage { --span: calc(94cqw - 291px); --shift: -66px; }
}
@media (max-width: 1023px) and (max-height: 500px) and (orientation: landscape) {
  .home .hero-media { height: auto; min-height: 0; align-self: stretch; }
  /* The panel runs as tall as the text beside it; the loom is sized to the first screen so it is seen whole. */
  .home .hero-stage { --room: calc(min(100cqh, 100svh) - var(--top) - var(--gap)); }
  .home .hero-copy { padding: 84px 28px 28px; }
}
@media (max-width: 1023px) {
  .weaves { grid-template-columns: 1fr; }
  .weave-card, .weave-card:first-child, .weave-card:last-child { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 40px; padding: 34px 0; }
  .weave-card + .weave-card { border-left: 0; border-top: 1px dashed var(--line); }
  .weave-card > :not(ul):not(.text-link) { grid-column: 1; }
  .weave-card ul { grid-column: 2; grid-row: 1 / span 5; margin: 0; }
  .weave-card .text-link { grid-column: 2; margin-top: 26px; }
  .care { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .warp-weft { max-width: 440px; }
  /* Pinned on a phone: the frame ends above the gauge, the intro keeps to a compact size and the
     window fades at its edges, so the card under the reader is always read whole. */
  .pin-mobile .approach-frame { height: calc(100svh - 176px); }
  .pin-mobile .reader-label { margin-bottom: 12px; }
  .pin-mobile .home .approach-intro h2 { font-size: clamp(34px, 9.4vw, 42px); line-height: 1; }
  .pin-mobile .home .approach-intro > p:not(.reader-label) { max-width: 540px; margin-top: 12px; font-size: 14px; line-height: 1.5; }
  /* The window fades at its top and bottom edges under a veil of the frame's own colour rather than a mask:
     Safari redraws a masked area on every frame its content moves, which made the reader stutter on an iPhone. */
  .pin-mobile .principle-window::before, .pin-mobile .principle-window::after { content: ''; position: absolute; left: 0; right: 0; z-index: 2; height: 20px; pointer-events: none; }
  .pin-mobile .principle-window::before { top: 0; background: linear-gradient(var(--loom), #2f332a00); }
  .pin-mobile .principle-window::after { bottom: 0; background: linear-gradient(#2f332a00, var(--loom)); }
  .pin-mobile .principle-list { gap: 40px; }
  .pin-mobile .principle-step.punch-card { width: min(100%, 440px); aspect-ratio: auto; min-height: auto; padding: 18px 20px 20px; border-radius: 3px; background: #ebe1cb; text-align: left; align-items: stretch; }
  .pin-mobile .principle-step.punch-card.is-active { background: #f5ecd7; }
  .pin-mobile .principle-step.punch-card h3 { margin-bottom: 8px; font-size: clamp(32px, 8.6vw, 40px); }
  .pin-mobile .punch-text p { font-size: 14px; line-height: 1.5; }
  .pin-mobile .punch-svg { width: min(100%, 156px); }
  .pin-mobile .punch-code { margin: 10px 0 6px; }
  /* A short screen (a smaller phone, or Safari with its bars out) tightens the heading and the card, so the
     card still reads whole under the reader; the text keeps its size (app.js tries this before giving up). */
  .pin-mobile-short .approach-frame { top: 86px; height: calc(100svh - 158px); }
  .pin-mobile-short .home .approach-intro h2 { font-size: var(--t4); }
  .pin-mobile-short .principle-list { gap: 28px; }
  .pin-mobile-short .principle-step.punch-card { padding: 14px 18px 16px; }
  .pin-mobile-short .principle-step.punch-card h3 { margin-bottom: 6px; font-size: var(--t4); }
  .pin-mobile-short .punch-svg { width: min(100%, 118px); }
  .pin-mobile-short .punch-code { margin: 6px 0 4px; }
}
@media (max-width: 767px) {
  :root { --t1: 18px; --t2: 21px; --t3: 26px; --t4: 30px; --t5: 36px; --t6: 40px; --t7: clamp(42px, 12.6vw, 60px); --t8: clamp(46px, 13.6vw, 68px); }
  body { font-size: 17px; }
  .hero-kicker { margin-bottom: 16px; }
  .home .hero-description { margin-top: 18px; font-size: 16px; }
  .home .hero-action { margin-top: 22px; }
  .epigraph { grid-template-columns: 1fr; }
  .swatches { grid-template-columns: 1fr; gap: 40px; }
  .swatch--site .swatch-link { display: block; }
  .swatch--site .swatch-tag, .swatch-tag { margin: -30px 14px 0; }
  .swatch:nth-child(n) .swatch-cloth { margin-top: 0; }
  /* On a phone the two studies are shown as a cut across their cloth, not the whole square. */
  .swatch:not(.swatch--site) .swatch-cloth { aspect-ratio: 16 / 10; }
  .weave-card, .weave-card:first-child, .weave-card:last-child { display: flex; padding: 30px 0; }
  .weave-card ul { margin: 0 0 24px; }
  .weave-card .text-link { margin-top: 0; }
  .care-label { padding: 26px 24px 20px; }
  .care-label ul { columns: 1; }
  .spools { grid-template-columns: 1fr; }
  .spool, .spool + .spool { min-height: 96px; padding: 18px 0; border-left: 0; }
  .spool + .spool { border-top: 1px dashed var(--line); }
  .principle-step.punch-card { padding: 20px 22px 22px; }
  .thread-item { grid-template-columns: 1fr; padding: 32px 0 28px; }
  .note summary { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; }
  .knot svg { width: 40px; }
  .note-body { padding-left: 0; }
  .contact-body { grid-template-columns: 1fr; }
  .footer-inner { padding-bottom: 104px; }
  .site-footer .footer-top { flex-direction: column; align-items: flex-start; }
  .loom-hud { bottom: 10px; }
  .loom-hud .hud-button { padding: 0 11px; }
  .loom-hud [data-side-label], .loom-hud [data-motion-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .loom-hud .hud-button { min-width: 42px; justify-content: center; }
}

/* ---- Motion preferences ---- */
[data-motion='paused'] .statement-text.is-split .w { color: var(--ink); }
[data-motion='paused'] .weave-draft .draft-row, [data-motion='paused'] .thread-item .thread-line { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .statement-text.is-split .w { color: var(--ink); }
  .weave-draft .draft-row, .thread-item .thread-line { opacity: 1 !important; transform: none !important; }
}
/* Case pages: four decisions sit two by two; the principles that carry over to a client's site */
.decision-grid--dort { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 767px) { .decision-grid--dort { grid-template-columns: 1fr; } }
.case-principles { display: grid; gap: 14px; margin: 22px 0 0; padding: 0; list-style: none; }
.case-principles li { padding-left: 22px; position: relative; color: var(--muted); }
.case-principles li::before { content: ''; position: absolute; left: 0; top: .62em; width: 10px; height: 2px; background: #c99a2e; }
.case-principles strong { font-weight: 600; color: var(--ink); }

/* ---- Service pages: a woven sketch of the client's first screen, in the profession's own thread ----
   The sketch is plain HTML and CSS (it is what shows without WebGL) and is woven by
   kaynak/dokuma/gorseller.js from its own layout. Sizes are in container units, so the sketch keeps its
   proportions at every width; colours are plain hex, because the weaver reads computed colours. */
.taslak { width: min(900px, calc(100% - 144px)); margin: clamp(48px, 6vw, 80px) auto 0; }
.taslak--indigo { --tk: #2e4163; --tk-acik: #d3d8e2; --tk-orta: #8995ad; }
.taslak--madder { --tk: #a3392c; --tk-acik: #ecd5ce; --tk-orta: #c98a80; }
.taslak--walnut { --tk: #6a4b33; --tk-acik: #e4d7c7; --tk-orta: #a88d74; }
.taslak--loom { --tk: #3f4a37; --tk-acik: #d6d9cc; --tk-orta: #8f9883; }
.taslak-ekran { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 3cqw; aspect-ratio: 16 / 10; padding: 3.6cqw 5cqw 4cqw; overflow: hidden; container-type: inline-size; border-radius: 6px; background: #f7f2e7; box-shadow: 0 1px 0 #25261f14, 0 24px 44px -26px #25261f73; }
.taslak-ekran > * { container-type: normal; }
.taslak-ekran i { display: block; }
.tk-ust { display: flex; align-items: center; justify-content: space-between; }
.tk-ad { font: 500 2.6cqw/1.1 var(--serif); letter-spacing: -.01em; color: #25261f; white-space: nowrap; }
.tk-menu { display: flex; gap: 1.4cqw; }
.tk-menu i { width: 6cqw; height: 1cqw; border-radius: .5cqw; background: #cbbfa6; }
.tk-ana { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 4cqw; align-items: center; }
.tk-metin { display: flex; flex-direction: column; align-items: flex-start; }
.tk-baslik { font: 460 5.2cqw/1.06 var(--serif); letter-spacing: -.03em; color: #25261f; white-space: nowrap; }
.tk-cubuk { width: 92%; height: 1.05cqw; margin-top: 1.1cqw; border-radius: .55cqw; background: #d2c7b1; }
.tk-baslik + .tk-cubuk { margin-top: 2.4cqw; }
.tk-cubuk--kisa { width: 58%; }
.tk-dugme { margin-top: 2.6cqw; padding: 1.2cqw 2.2cqw; border-radius: .6cqw; background: var(--tk); font: 600 1.8cqw/1.2 var(--sans); color: #f7f2e7; white-space: nowrap; }
.tk-yan { display: flex; flex-direction: column; align-items: flex-end; gap: 1.6cqw; }
.tk-portre { position: relative; width: 80%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 50% 50% .6cqw .6cqw / 36% 36% .6cqw .6cqw; background: var(--tk-acik); }
.tk-bas { position: absolute; left: 33%; top: 26%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--tk-orta); }
.tk-omuz { position: absolute; left: 14%; right: 14%; bottom: 0; height: 32%; border-radius: 50% 50% 0 0 / 80% 80% 0 0; background: var(--tk-orta); }
.tk-kartlar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; }
.tk-kart, .tk-saatler { display: block; padding: 1.6cqw 1.8cqw 1.8cqw; border-radius: .6cqw; background: #eee6d5; }
.tk-kart-ad { display: block; font: 600 1.95cqw/1.2 var(--sans); color: #25261f; white-space: nowrap; }
.tk-kart .tk-cubuk, .tk-saatler .tk-cubuk { width: 86%; height: .9cqw; margin-top: 1cqw; background: #d8cdb6; }
.tk-kart .tk-cubuk--kisa, .tk-saatler .tk-cubuk--kisa { width: 52%; }
/* a doctor: a framed portrait and a card with the consulting hours */
.taslak--hekim .tk-portre { width: 62%; aspect-ratio: 1; border-radius: .6cqw; }
.taslak--hekim .tk-saatler { width: 62%; }
/* a lawyer: a formal, centred page; the practice areas stand in three columns */
.taslak--avukat .tk-ust { flex-direction: column; gap: 1.6cqw; }
.taslak--avukat .tk-ana { grid-template-columns: 1fr; }
.taslak--avukat .tk-metin { align-items: center; }
.taslak--avukat .tk-cubuk { width: 46%; }
.taslak--avukat .tk-cubuk--kisa { width: 30%; }
.taslak--avukat .tk-kart { background: none; padding: 1.4cqw 0 0; }
.taslak--avukat .tk-kart .tk-kart-ad { font: 500 2.1cqw/1.2 var(--serif); color: var(--tk); }
/* other work: the work itself, as a small gallery */
.tk-galeri { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2cqw; width: 88%; aspect-ratio: 1; }
.tk-galeri i { border-radius: .4cqw; background: var(--tk-acik); }
.tk-galeri i:nth-child(2), .tk-galeri i:nth-child(3) { background: var(--tk-orta); }
/* once woven, the words stand over the cloth as the page's own type, and the button's ground is the woven one */
.taslak .dokundu :is(.tk-ad, .tk-baslik, .tk-dugme, .tk-kart-ad) { position: relative; z-index: 2; }
.taslak .dokundu .tk-dugme { background: none; }
.taslak figcaption { max-width: 560px; margin: 18px auto 0; text-align: center; font: var(--note); color: var(--muted); }
@media (max-width: 1023px) { .taslak { width: calc(100% - 96px); } }
@media (max-width: 767px) {
  /* on a phone the sketch is a phone's first screen: square, with type large enough to read */
  .taslak { width: calc(100% - 44px); }
  .taslak-ekran { aspect-ratio: 1; gap: 5cqw; padding: 6cqw; }
  .tk-ad { font-size: 3.8cqw; }
  .tk-menu { gap: 2cqw; }
  .tk-menu i { width: 6cqw; height: 1.4cqw; }
  .tk-ana { grid-template-columns: minmax(0, 1fr) 24cqw; gap: 3cqw; }
  .tk-baslik { font-size: 6.4cqw; }
  .tk-cubuk { height: 1.6cqw; margin-top: 1.6cqw; }
  .tk-baslik + .tk-cubuk { margin-top: 3.4cqw; }
  .tk-dugme { margin-top: 3.6cqw; padding: 2cqw 3.4cqw; font-size: 3.4cqw; }
  .tk-portre { width: 100%; }
  .taslak--hekim .tk-portre { width: 100%; }
  .taslak--hekim .tk-saatler { display: none; }
  .tk-galeri { width: 100%; }
  .tk-kartlar { gap: 2.6cqw; }
  .tk-kart, .tk-saatler { padding: 2.6cqw 2.6cqw 3cqw; }
  .tk-kart-ad { font-size: 3.1cqw; }
  .tk-kart .tk-cubuk, .tk-saatler .tk-cubuk { height: 1.3cqw; margin-top: 1.6cqw; }
  .taslak--avukat .tk-ana { grid-template-columns: 1fr; }
  .taslak--avukat .tk-cubuk { width: 70%; }
  .taslak--avukat .tk-cubuk--kisa { width: 46%; }
  .taslak--avukat .tk-kart .tk-kart-ad { font-size: 3.6cqw; }
}

/* ---- Guide and site use: a kilim band whose meaning fits the page ---- */
.motif-serit { width: min(1216px, calc(100% - 144px)); margin: clamp(44px, 5vw, 70px) auto 0; }
.motif-kumas { position: relative; height: 96px; overflow: hidden; border-radius: 2px; box-shadow: 0 16px 30px -22px #25261f80; }
.motif-cizim { display: block; width: 100%; height: 100%; }
.motif-serit figcaption { max-width: 640px; margin-top: 16px; font: var(--note); color: var(--muted); }
.motif-ad { margin-right: .4em; font: var(--label); color: var(--ink); }
@media (max-width: 1023px) { .motif-serit { width: calc(100% - 96px); } }
@media (max-width: 767px) { .motif-serit { width: calc(100% - 44px); } .motif-kumas { height: 72px; } }
/* the guide's sections happen in this order, so they are numbered */
.adimlar { counter-reset: adim; }
.adimlar > section > h2::before { counter-increment: adim; content: counter(adim); display: block; margin-bottom: 12px; font: 330 var(--t5)/1 var(--serif); color: var(--gold-ink); }
/* the site use page opens with the short version */
.kisaca ul { padding-left: 0; list-style: none; }
.kisaca li { position: relative; padding-left: 22px; }
.kisaca li::before { content: ''; position: absolute; left: 0; top: .7em; width: 10px; height: 2px; background: #c99a2e; }

/* the page's own thread passes the headings in the profession's dye */
[class*='iplik-'] { --iplik-cekirdek: color-mix(in srgb, var(--thread), #fff 22%); --iplik-kenar: color-mix(in srgb, var(--thread), #000 38%); }

/* ---- The story: one gold weft runs through four knots, a year at each ---- */
.story-line { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(24px, 3vw, 48px); margin-top: 0; margin-bottom: 0; padding: 0; list-style: none; }
.story-line::before { content: ''; position: absolute; top: 14px; left: 0; right: 0; height: 2px; background: #c99a2e; border-radius: 1px; }
.story-step { position: relative; padding-top: 52px; }
.story-step::before { content: ''; position: absolute; top: 6px; left: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 2px #c99a2e, 0 0 0 5px var(--paper); }
.story-step .story-year { margin: 0 0 16px; font: 330 var(--t6)/1 var(--serif); letter-spacing: -.03em; color: var(--ink); }
.story-step h3 { margin-bottom: 12px; font: var(--label); color: var(--gold-ink); }
.story-step p { max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--muted); }
.story-quote { margin: 0 0 10px; }
.story-step .story-quote p { max-width: 24ch; font: 360 var(--t1)/1.35 var(--serif); color: var(--ink); }
.story-step p.story-source { font: var(--note); }
.story-figure { max-width: 200px; margin: 22px 0 0; }
.story-figure img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 0 14px 24px -16px #25261f99; }
.story-figure figcaption { margin-top: 10px; font: var(--note); color: var(--muted); }
@media (max-width: 1023px) {
  .story-line { grid-template-columns: 1fr; gap: 40px; padding-left: 40px; }
  .story-line::before { top: 0; bottom: 0; left: 8px; right: auto; width: 2px; height: auto; }
  .story-step { padding-top: 0; }
  .story-step::before { top: 8px; left: -40px; }
}

/* ---- The toy: the visitor's name, woven ---- */
html:not(.js) .toy { display: none; }
.toy-grid { display: grid; grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.toy-form { display: grid; gap: 12px; }
.toy-label { padding: 0; font: var(--label); color: var(--ink); }
.toy-input { width: 100%; padding: 6px 0 10px; border: 0; border-bottom: 1.5px solid var(--ink); border-radius: 0; background: none; font: 340 var(--t4)/1.15 var(--serif); letter-spacing: -.015em; color: var(--ink); }
.toy-input::placeholder { color: #25261f59; }
.toy-input:focus-visible { outline: none; border-bottom-color: var(--gold-ink); box-shadow: 0 2px 0 var(--gold); }
.toy-hint { margin: 0 0 18px; font: var(--note); color: var(--muted); }
.toy-motifs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 14px; padding: 0; border: 0; }
.toy-motifs legend { margin-bottom: 12px; }
.toy-motif { position: relative; display: grid; gap: 4px; padding: 14px 14px 12px; border-radius: 4px; background: #ebe1cb; cursor: pointer; transition: background .25s, box-shadow .25s; }
.toy-motif input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.toy-motif-desen { display: block; width: 100%; height: 22px; margin-bottom: 8px; border-radius: 2px; }
.toy-motif-ad { font: 400 var(--t1)/1.2 var(--serif); }
.toy-motif-anlam { font: var(--note); color: var(--muted); }
.toy-motif:has(input:checked) { background: #f5ecd7; box-shadow: inset 0 0 0 1.5px var(--ink); }
.toy-motif:has(input:focus-visible) { outline: 2px solid var(--gold-ink); outline-offset: 3px; }
.toy-weave { justify-self: start; min-height: 48px; padding: 0 28px; border: 0; border-radius: 4px; background: var(--gold); font: 500 17px/1.2 var(--sans); color: #25261f; cursor: pointer; }
.toy-weave:focus-visible, .toy-action:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.toy-result, .toy-figure { margin: 0; }
.toy-cloth { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 2px; background: #34402f; box-shadow: 0 22px 40px -22px #25261f80; rotate: -.6deg; }
.toy-flat { position: absolute; inset: 0; width: 100%; height: 100%; }
.toy-cards { display: flex; flex-wrap: wrap; gap: 6px; min-height: 64px; margin-top: 22px; }
.toy-card { display: grid; justify-items: center; gap: 4px; width: 26px; font: var(--data); color: var(--muted); }
.toy-card svg { width: 22px; height: auto; padding: 3px 0; border-radius: 2px; background: #ddd0b0; box-shadow: inset 0 0 0 1px #25261f1a; fill: #34402f; transition: background .3s, fill .3s; }
.toy-card.is-read svg { background: #34402f; fill: #e8c65a; box-shadow: none; }
.toy-card span { color: var(--ink); }
.toy-status { min-height: 1.5em; margin-top: 14px; font: var(--label); color: var(--ink); }
.toy-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.toy-action { min-height: 44px; padding: 0 18px; border: 1.5px solid var(--ink); border-radius: 4px; background: none; font: var(--label); color: var(--ink); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .toy-motif:hover { background: #f5ecd7; } .toy-action:hover { background: #25261f0d; } }
@media (max-width: 1023px) { .toy-grid { grid-template-columns: 1fr; } .toy-result { order: -1; } }
@media (max-width: 420px) { .toy-motifs { grid-template-columns: 1fr; } .toy-cards { gap: 4px; } .toy-card { width: 21px; } .toy-card svg { width: 19px; } }

/* ---- The card chain: every page as a punched card, laced into a chain ----
   A modal dialog over the page (app.js). Each group of cards hangs on its own lacing thread, seen
   through the lace hole at each card's left; the holes at the right spell the page's name in
   ISO-8859-9 and turn gold as a card is read (hover, focus, the page you are on). */
.kart-zinciri { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 18px var(--side) 56px; border: 0; background: #2b2e26; color: #f3eee3; overflow-y: auto; overscroll-behavior: contain; }
.kart-zinciri[open] { display: flex; flex-direction: column; }
.kart-zinciri::backdrop { background: #1b1d17b8; }
.kart-zinciri[open] { animation: kz-ac .35s cubic-bezier(.2,.7,.2,1) both; }
@keyframes kz-ac { from { opacity: 0; } }
.kz-ust { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 52px; max-width: 1216px; margin: 0 auto clamp(28px, 6vh, 64px); }
.kz-baslik { margin: 0; font: var(--label); color: #e9e3d4b3; }
.kz-ust-sag { display: flex; align-items: center; gap: 10px; }
.kz-dil { padding: 12px 16px; border-radius: 6px; box-shadow: inset 0 0 0 1px #f3eee366; font: var(--label); color: #f3eee3; }
.kz-dil:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .kz-dil:hover { background: #f3eee31a; } .site-nav a.nav-dil:hover { color: #25261f; } }
.kz-kapat { padding: 13px 18px; border: 0; border-radius: 6px; background: #f3eee3; font: var(--label); color: #25261f; cursor: pointer; }
/* the chain hangs in the middle of the room left under the bar */
.kz-gruplar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px 28px; width: 100%; max-width: 1216px; margin: auto; padding-bottom: 6vh; align-items: start; }
.kz-grup-ad { margin: 0 0 14px; font: var(--label); color: var(--gold); }
.kz-grup ul { position: relative; display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.kz-grup ul::before { content: ''; position: absolute; top: -10px; bottom: -10px; left: 17px; width: 1.5px; background: #cfc4ad; opacity: .7; }
.kz-grup li { position: relative; }
.kart { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 14px; min-height: 74px; padding: 12px 16px 12px 36px; border-radius: 3px; background: #ebe1cb; color: #25261f; clip-path: polygon(14px 0, 100% 0, 100% 100%, 0 100%, 0 14px); transition: background .3s; }
/* the lace hole, with the thread passing through it */
.kart::before { content: ''; position: absolute; left: 13px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: #2b2e26; box-shadow: inset 0 1px 1px #0006; }
.kart-yazi { display: grid; gap: 4px; }
.kart-ad { font: 400 var(--t2)/1.05 var(--serif); letter-spacing: -.012em; }
.kart-not { font: var(--note); color: #5f5c51; }
.kart-delik { width: 46px; height: auto; }
.kart-delik-acik { fill: #2b2e26; transition: fill .3s; }
.kart[aria-current] { background: #f5ecd7; }
.kart[aria-current] .kart-delik-acik { fill: #e2b33c; }
.kart:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.kart:focus-visible .kart-delik-acik { fill: #e2b33c; }
@media (hover: hover) and (pointer: fine) { .kart:hover { background: #f5ecd7; } .kart:hover .kart-delik-acik { fill: #e2b33c; } .kz-kapat:hover { background: var(--gold); } }
/* opening, the cards come down the chain one after another */
.kz-grup:nth-child(2) { --g: 1; } .kz-grup:nth-child(3) { --g: 2; } .kz-grup:nth-child(4) { --g: 3; }
.kz-grup li:nth-child(2) { --n: 1; } .kz-grup li:nth-child(3) { --n: 2; } .kz-grup li:nth-child(4) { --n: 3; } .kz-grup li:nth-child(5) { --n: 4; } .kz-grup li:nth-child(6) { --n: 5; }
.kart-zinciri[open] .kz-grup li { animation: kz-kart .55s calc((var(--g, 0) * 2 + var(--n, 0)) * 38ms) cubic-bezier(.2,.7,.2,1) both; }
@keyframes kz-kart { from { opacity: 0; transform: translateY(-16px); } }
html[data-motion='paused'] .kart-zinciri[open], html[data-motion='paused'] .kart-zinciri[open] .kz-grup li { animation: none; }
@media (prefers-reduced-motion: reduce) { .kart-zinciri[open], .kart-zinciri[open] .kz-grup li { animation: none; } }
@media (max-width: 1100px) { .kz-gruplar { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .kart-zinciri { padding-top: 14px; }
  .kz-gruplar { grid-template-columns: 1fr; gap: 26px; }
  .kart { min-height: 64px; }
}

/* ---- Between pages: the new page is woven down over the old one ----
   A real navigation, so back and forward, focus and screen readers behave as on any link; browsers
   without cross-document view transitions simply go to the page. A gold weft rides the edge of the
   new page as it comes down. A swatch on the home page and its work's cover are the same cloth: going
   from one to the other, the swatch opens out into the cover, and back. The monogram stays put. */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
/* The gold weft that rides the edge of the new page. It is there only while a page change is woven
   (dokuma-mekik moves it): at rest no bar lies on the window's top edge, so Safari on iOS 26 lets the page
   run softly under its own bars instead of cutting it off there. */
.mekik { display: none; position: fixed; z-index: -1; top: 0; left: 0; right: 0; height: 2px; background: var(--gold); box-shadow: 0 0 10px #e8c65a80; transform: translateY(-8px); pointer-events: none; view-transition-name: mekik; }
html:active-view-transition .mekik { display: block; }
.brand { view-transition-name: marka; }
.case-cover > .case-cloth { view-transition-name: numune-site; }
.project-cover > .atlas-art { view-transition-name: numune-atlas; }
.project-cover > .forma-art { view-transition-name: numune-forma; }
/* the swatch on the home page takes its name only for the one navigation (ilmek.js) */
::view-transition-new(root) { animation: dokuma-yeni .72s cubic-bezier(.45,.05,.15,1) both; mix-blend-mode: normal; }
::view-transition-old(root) { animation: dokuma-eski .72s cubic-bezier(.45,.05,.15,1) both; mix-blend-mode: normal; }
@keyframes dokuma-yeni { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes dokuma-eski { to { filter: brightness(.82); } }
::view-transition-group(mekik) { animation: dokuma-mekik .72s cubic-bezier(.45,.05,.15,1) both; }
html.is-turning::view-transition-group(mekik) { display: none; }   /* turning the cloth over is not a page change */
::view-transition-old(mekik) { display: none; }
::view-transition-new(mekik) { animation: none; }
@keyframes dokuma-mekik { from { transform: translateY(-8px); } to { transform: translateY(calc(100vh + 4px)); } }
::view-transition-group(numune-site), ::view-transition-group(numune-atlas), ::view-transition-group(numune-forma) { animation-duration: .72s; animation-timing-function: cubic-bezier(.45,.05,.15,1); overflow: clip; }
::view-transition-old(numune-site), ::view-transition-new(numune-site), ::view-transition-old(numune-atlas), ::view-transition-new(numune-atlas),
::view-transition-old(numune-forma), ::view-transition-new(numune-forma) { height: 100%; object-fit: cover; animation-duration: .72s; }
::view-transition-old(numune-atlas), ::view-transition-new(numune-atlas) { object-position: 100% 50%; }

@media print {
  .loom-hud, .thread, .fringe, .spec-layer, .hero-selvage { display: none !important; }
  .site-footer { background: none; color: #000; }
  /* Paper keeps no dark cloth: the text that was light on it prints in ink. */
  .home .hero, .home .approach, .approach-frame { background: none !important; }
  .home .hero :is(h1, p, a), .home .approach :is(h2, p, a, span), .site-footer :is(a, span, p) { color: #000 !important; }
  .statement-text .w { color: #000 !important; }
}