/* ============================================================
   home.css — home page only. Loads after core.css.
   ============================================================ */

/* ---------- hero ---------------------------------------------- */
.hero .wrap{padding-top:var(--f38-86);padding-bottom:var(--f30-52)}
/* Written in capitals in the markup, not transformed in CSS: an English
   page uppercases i to I and the name became HALIL. The dotted I is part
   of how the name is spelled.
   The name is the headline now. A visitor who lands here is checking
   who this is before deciding whether to read anything; the sentence
   that used to sit here asked to be read first and was scrolled past.
   Name, then what he does, then the record, then one control. */
.hero h1.hero-name{
  font-weight:300;font-size:clamp(2.75rem,7.4vw,6.5rem);line-height:1.18;
  letter-spacing:-.015em;margin:0 0 var(--s12);max-width:none;
}
/* Two lines, and the weight does the introducing: the name he is
   called by is the one set in bold, the rest of it stays light.
   Each part is its own line so the break never depends on the width. */
.hero-name span{display:block}
.hero-name b{font-weight:700}
/* One column below 940: the name has the whole measure to itself and
   can be set larger than the two-column figure allows. */
@media(max-width:939px){.hero h1.hero-name{font-size:clamp(2.75rem,12vw,5rem)}}
/* Tight under the name: the two read as one block, not two statements. */
.hero .lab{display:block;margin-bottom:var(--f16-24);color:var(--ink-3)}
.sub{
  font-size:var(--t-lead);line-height:1.55;color:var(--ink-2);
  max-width:60ch;margin:0 0 var(--s20);
}
/* The record, then the invitation: the link is the last thing in the column,
   and the three blocks sit close enough to read as one paragraph of intent. */
.proof{
  font-size:var(--t-label);line-height:1.7;color:var(--ink-3);max-width:66ch;
  margin:0 0 var(--s12);
}
.proof b{color:var(--ink-2);font-weight:400}
.act{
  display:inline-flex;align-items:center;gap:var(--s8);min-height:44px;
  font-size:var(--t-body-s);font-weight:500;color:var(--ember);
  transition:opacity .16s var(--ease);
}
.act:hover{opacity:.72}
.act:active{opacity:.5}
.act span{transition:transform var(--dur-2) var(--ease)}
@media(hover:hover){.act:hover span{transform:translateY(3px)}}

.sec h2{font-weight:600;font-size:var(--t-head);letter-spacing:-.02em;margin:0}

/* ---------- notes from practice ------------------------------- */
.notes{list-style:none;margin:0;padding:0}
.notes a{
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4) var(--s20);padding:var(--s20) 0;min-height:44px;align-items:baseline;
}
@media(min-width:760px){.notes a{grid-template-columns:minmax(0,1fr) 74px}}
/* The date stays in the markup for machines and for sorting, and off the
   listing: a note is chosen by its title, and the date is on the note. */
.notes .dt{display:none}
.notes .ti{font-size:var(--t-body);color:var(--ink);transition:color .2s var(--ease);max-width:56ch}
.notes a:hover .ti{color:var(--ember)}
.notes .rd{font-size:var(--t-label);color:var(--ink-3)}
@media(min-width:760px){.notes .rd{text-align:right}}

/* The eyebrow reads as one line wherever there is room for it: the
   last word was dropping to a lonely second line on wide screens. */
.hero-copy > .lab{display:block;text-wrap:balance;letter-spacing:.01em}
@media(min-width:1180px){.hero-copy > .lab{white-space:nowrap}}

/* ---------- companies and brands ------------------------------
   Eighteen names as one line that keeps moving, right to left, above the
   project. The track holds the list twice and travels exactly half its
   own width, so the loop closes on itself with no seam and no jump; the
   first copy is the list and carries the semantics, the second is scenery
   and is hidden from assistive technology. It runs edge to edge, faded at
   both ends, so the names arrive from outside the page rather than
   starting against a border. The dot between them is drawn, not typed, so
   the names still copy out clean.
   The motion is one transform on one element, promoted to its own layer
   with will-change — the compositor's work, not the main thread's. Without
   the promotion the text snapped to whole pixels at under a pixel a frame,
   which read as stutter. The edge fade is two overlays painted in the page's
   own colour, not a mask-image: Safari repaints everything under a mask on
   every frame, so a masked moving line cannot stay on the compositor. */
.strip{padding:var(--f30-52) 0}
.strip h2{margin:0 0 var(--s16);text-align:left}
.marquee{position:relative;overflow:hidden}
.marquee::before,.marquee::after{
  content:"";position:absolute;top:0;bottom:0;width:5%;z-index:1;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--canvas),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--canvas),transparent)}
.marquee-track{display:flex;width:max-content}
html.js .marquee-track{animation:brands-slide 52s linear infinite;will-change:transform;backface-visibility:hidden}
/* A name someone is reaching for should hold still long enough to be read. */
@media(hover:hover){.marquee:hover .marquee-track{animation-play-state:paused}}
.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes brands-slide{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.brands{
  display:flex;align-items:baseline;margin:0;color:var(--ink);
  font-size:var(--t-body-s);line-height:1.65;letter-spacing:0;font-weight:200;
}
.brands span{white-space:nowrap}
.brands span::after{content:"\00B7";color:var(--ember);margin:0 1.25em;font-weight:500}
/* No motion asked for: the line stops being a line. The duplicate goes, the
   names wrap inside the page's own gutter, and what is left is the sentence
   they were before. */
@media (prefers-reduced-motion: reduce){
  .marquee{overflow:visible}
  .marquee::before,.marquee::after{content:none}
  .marquee-track{display:block;width:auto;animation:none}
  .marquee-track .brands[aria-hidden]{display:none}
  .marquee .brands{display:block;max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}
  .brands span{display:inline-block}
  .brands span:last-child::after{content:none}
}

/* ---------- hero: copy on the left, the lattice on the right --- */
.hero-grid{display:grid;gap:var(--f26-40)}
@media(min-width:940px){
  .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,28rem);align-items:center;gap:var(--f34-72)}
}
/* On a phone the lattice sits under the sentence, not over it. Stacked
   above the heading it once took a third of the first screen to say nothing
   the heading does not say better, and it was taken out. What was left was
   a first screen of type and nothing else — a hero, a list of names, a
   heading — and the box is back for that reason, as a wide, shallow band
   between the way to the demo and the eighteen names. The heading still
   speaks first; the band is the breath before the list. The drawing keeps
   to ~0.84 of the band's height, so the width is margin the eye reads as
   composition rather than as a hole, and a full step of space sits between
   the last line of copy and the band's edge, on top of the grid's own gap. */
.hero-art{position:relative;width:100%;aspect-ratio:1;padding:6%}
@media(min-width:940px){.hero-art{justify-self:end;align-self:start}}
/* On a phone the lattice is behind the sentence, not above it and not under
   it: it costs the page no height at all, which is the whole point — the
   first screen stays the hero. Pulled out of the grid, dropped to a fifth
   of its strength and masked so the drawing gathers at the lower right and
   has faded to nothing by the left margin, where every line of type starts.
   Measured on a 390px screen against the worst pixel in each text block:
   19.3:1 behind the heading, 7.0 behind the lead, 4.7 behind the record,
   6.9 behind the link — all of it still above AA. */
@media(max-width:939px){
  /* The ground bleeds past the column on purpose; without this it bleeds
     past the page too and the whole document slides sideways — 31px of it
     on a 390px screen. Clipped at the section, so the drawing still runs
     out to the edge of the screen and stops there. */
  .hero{overflow:hidden}
  .hero .hero-grid{position:relative;isolation:isolate}
  .hero-copy{position:relative;z-index:1}
  .hero-art{
    position:absolute;right:-8%;bottom:-6%;width:min(90%,23rem);padding:0;
    z-index:0;opacity:.22;pointer-events:none;
    -webkit-mask-image:radial-gradient(78% 78% at 72% 68%,#000 0%,#000 46%,transparent 88%);
    mask-image:radial-gradient(78% 78% at 72% 68%,#000 0%,#000 46%,transparent 88%);
  }
  .hero .wrap{padding-top:var(--s32)}
}
.hero-art canvas{display:block;width:100%;height:100%}

/* The heading and the phone are one thought, so they are not held
   apart by the space that separates one section from the next. */
/* Half again as much room under the project than under any other
   section: the notes below start a different subject. */
#work .wrap{padding-bottom:calc(var(--pad-sec) * 1.5)}
/* The left column is the phone and nothing else. "Live demo" and the line
   under it used to live up here; they belong with the prose that introduces
   the project, so they moved into it — one column of words, one of glass. */
.showcase-side{display:grid;justify-items:start;min-width:0;width:100%}
.showcase-side .device{align-items:center;width:min(360px,78vw,46vh)}

/* ---------- the project beside the device --------------------- */
.showcase{display:grid;gap:var(--f30-52);justify-items:center}
@media(min-width:900px){
  /* Two columns and nothing clever: the phone on the left, the project's own
     column on the right, both starting on the same line. */
  .showcase{
    grid-template-columns:minmax(0,380px) minmax(0,1fr);
    column-gap:var(--f34-72);row-gap:0;align-items:start;justify-items:start;
  }
  /* The column is much shorter than the frame beside it, so it is centred
     against it: the two middles sit on one horizontal line and the hole
     that opened under the text closes. */
  .showcase-copy{align-self:center}
}
/* On one column the page reads in the order a stranger needs it: what this
   is, why it exists, then the phone to try it on, and only then the way
   deeper in. Both wrappers dissolve so their children become rows of the
   same grid and can be ordered independently of the markup — which stays in
   the order the two-column layout and a screen reader both want. */
@media(max-width:899px){
  .showcase{row-gap:0;justify-items:stretch}
  .showcase-side,.showcase-copy{display:contents}
  .proj-h{order:1}
  .showcase-copy .lead{order:2}
  .showcase-more{order:3}
  .demo-head{order:4}
  .showcase-side .device{order:5;justify-self:center;margin:0 0 var(--s24)}
  .showcase-copy .act{order:6}
}
.showcase-copy{min-width:0;max-width:60ch;width:100%}
/* The project's name is the section's heading now — "Live demo" sits under
   it as the sub-part it always was, which is also the order a screen reader
   walks. */
/* The name is set as a logotype, not as a heading: about twice the size it
   was, on its own line, tight. It needs the extra class to get there — .sec h2
   is one tag more specific than a lone class and was quietly holding it at
   section-heading size, which is what made it look apologetic. */
.showcase .proj-h{
  margin:0 0 var(--s16);font-weight:700;font-size:clamp(2.75rem,7vw,4.5rem);
  letter-spacing:-.035em;line-height:1;
}
.proj-h a{color:var(--ink);transition:color var(--dur-1) var(--ease)}
.proj-h a:hover{color:var(--ember)}
.proj-h a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.demo-head{margin:var(--s24) 0 var(--s20)}
.demo-h{font-weight:600;font-size:var(--t-head);letter-spacing:-.02em;margin:0 0 var(--s4)}
.demo-head .device-hint{order:0;margin:0;max-width:48ch;text-align:left}
/* Two sentences, and on a wide screen the invitation gets its own line
   rather than trailing off the end of the statement. Not at 900 — the column
   is 386px there and the statement still wraps, so the break would buy a
   third line rather than a tidy second. From 960 the column hits its 48ch
   ceiling and the statement fits on one line; measured, not guessed. */
@media(min-width:960px){.hint-b{display:block}}
.showcase-copy .lead{margin:0 0 var(--s16);color:var(--ink-2);font-size:var(--t-body)}
.showcase-copy .led{
  margin:0 0 var(--s16);color:var(--ink);font-size:var(--t-body-s);line-height:1.5;
  padding-left:var(--s16);border-left:2px solid var(--ember);
}
/* Sentences, not fragments: one column, and the label sits above its
   line rather than beside it. */
.showcase-copy .params{margin-bottom:var(--s24);grid-template-columns:minmax(0,1fr);gap:var(--s16)}
.showcase-copy .verdict{margin-bottom:var(--s20)}
/* The long telling under the three lines: a lead word, then the sentence,
   so the block can be skimmed by its lead words or read straight through.
   Quieter than the lead paragraph above it, except for the last line,
   which is brighter and set apart: it is the one that admits what has
   not happened yet, and it should be the line nobody misses. */
.showcase-more{margin:0 0 var(--s12)}
.showcase-more p{margin:0 0 var(--s8);color:var(--ink-2);font-size:13.5px;line-height:1.5}
.showcase-more p:last-child{margin-bottom:0}
@media(min-width:1100px){
  .showcase-copy{max-width:none}
  .showcase-copy .lead,.showcase-copy .led,.showcase-more{max-width:62ch}
  .showcase-copy .params{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s20)}
}
/* Headed prose, stacked: a small heading, then its paragraphs; the
   reader goes down, never across. */
.showcase-more h4{
  margin:var(--s16) 0 var(--s4);font-size:var(--t-body-s);font-weight:600;
  letter-spacing:-.01em;color:var(--ink);
}
.showcase-more h4:first-child{margin-top:0}
.showcase-more b{color:var(--ink);font-weight:600}
.showcase-more .note{color:var(--ink);margin-top:var(--s16)}
/* The link wraps to two lines; the arrow stays with the first. */
.showcase-copy .act{align-items:flex-start;min-height:0}
.showcase-copy .act span{line-height:inherit}

/* ---------- the one thing to do next --------------------------
   The hero used to end in three paragraphs and no instruction, and
   readers scrolled straight past all of it. It now ends in a single
   line of record and one control, so the eye has somewhere to go. */
.sub b{color:var(--ink);font-weight:600}
.acts{margin:var(--f16-24) 0 0}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s8);
  min-height:48px;padding:0 var(--s24);border:1px solid var(--edge);border-radius:999px;
  font-size:var(--t-body-s);font-weight:500;color:var(--ink);letter-spacing:-.01em;
  transition:border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease);
}
@media(hover:hover){.btn:hover{border-color:var(--ember);color:var(--ember)}}
.btn:active{opacity:.7}
.btn:focus-visible{outline:2px solid var(--ember);outline-offset:3px}

/* ---------- the other two projects ----------------------------
   The listing page showed these as text blocks and nobody opened
   them. A project made of screens should be argued with a screen:
   the picture does the introducing, the two lines under it say what
   the thing is, and the whole card is the link. The frame is one
   object — border, picture and caption share an edge — so a row of
   them reads as a set rather than as loose blocks. */
.pcards{list-style:none;margin:0;padding:0;display:grid;gap:var(--f30-52)}
@media(min-width:900px){.pcards{grid-template-columns:minmax(0,1fr);gap:var(--s48)}}
.pcards li{min-width:0;display:flex}
/* Equal cards, whatever the caption runs to: the item stretches, the
   card fills it, and the picture keeps its ratio at the top. */
.pcard{
  display:flex;flex-direction:column;flex:1 1 auto;min-width:0;
  color:inherit;border:1px solid var(--rule);background:var(--raised);
  transition:border-color var(--dur-2) var(--ease);
}
@media(hover:hover){.pcard:hover{border-color:var(--rule-2)}}
.pcard:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.pc-media{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:var(--sunk);border-bottom:1px solid var(--rule);
}
.pc-media img{
  width:100%;height:100%;object-fit:cover;object-position:50% 0;
  transition:transform var(--dur-3) var(--ease);
}
@media(hover:hover){.pcard:hover .pc-media img{transform:scale(1.025)}}
.pc-cap{padding:var(--s20) var(--s20) var(--s24)}
.pc-name{
  margin:0 0 var(--s8);font-weight:600;font-size:var(--t-sub);
  letter-spacing:-.015em;line-height:1.25;
  transition:color var(--dur-2) var(--ease);
}
@media(hover:hover){.pcard:hover .pc-name{color:var(--ember)}}
.pc-note{margin:0;font-size:var(--t-body-s);line-height:1.5;color:var(--ink-2);max-width:48ch}
/* Not a second link, just the promise that there is more behind the
   card; it takes the accent only when the card itself is engaged. */
.pc-go{
  display:inline-flex;align-items:center;gap:var(--s8);margin-top:var(--s16);
  font-size:var(--t-label);letter-spacing:.01em;color:var(--ink-3);
  transition:color var(--dur-2) var(--ease);
}
@media(hover:hover){.pcard:hover .pc-go{color:var(--ember)}}

/* One project sits here now, so the card takes the whole measure and turns
   on its side: the screen large enough to be worth looking at, the two
   lines beside it rather than beneath. This has to come after the rules it
   overrides — same specificity, so order is what decides. Below 900 the
   card stacks exactly as it did. */
@media(min-width:900px){
  .pcard{flex-direction:row;align-items:stretch}
  /* The screenshot is 16:9; giving the frame that ratio here shows the
     whole capture instead of cropping its edges away. */
  .pc-media{flex:0 0 58%;aspect-ratio:16/9;border-bottom:0;border-right:1px solid var(--rule)}
  .pc-cap{
    flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
    padding:var(--f22-32);
  }
  .pc-name{font-size:var(--t-title);margin-bottom:var(--s12)}
  .pc-note{font-size:var(--t-body);max-width:40ch}
  .pc-go{margin-top:var(--s20)}
}