/* Base reset */
html,body{margin:0}
img{max-width:100%}
[hidden]{display:none!important}
/* Layout: a merchandiser's line sheet. One cobalt cover with a hangtag, then the work in rows
   dated by fashion season (FW26, SS21) and joined by stitched (dashed) rules. Tags are round, structure is square. */
:root{
  --paper:#F4F6FB; --surface:#FFFFFF; --ink:#0F1A3A; --muted:#566184; --line:#C6CFE4;
  --accent:#1D3FD0;
  --cover:#1D3FD0; --cover-fg:#FFFFFF; --cover-soft:#CBD5FF;
  --tag:#FBFCFF; --tag-fg:#0F1A3A; --tag-line:#B9C3DE; --shadow:rgba(4,8,36,.45);
  --marker:#FFE45C; --marker-ink:#2E2600; --marker-soft:#FFF8D2; --marker-line:#B99A00;
  --display:"Bodoni Moda","Bodoni MT","Didot","Times New Roman",serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
  --gutter:clamp(16px,4vw,44px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0A1024; --surface:#111936; --ink:#EDF0FA; --muted:#9BA6C9; --line:#2B3662;
    --accent:#93A8FF;
    --cover:#1B32A6; --cover-fg:#FFFFFF; --cover-soft:#C4CFFF;
    --tag:#E9EDF8; --tag-fg:#0F1A3A; --tag-line:#AEB8D6; --shadow:rgba(0,0,0,.6);
    --marker:#FFE45C; --marker-ink:#2E2600; --marker-soft:#26230F; --marker-line:#8C7A1A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#0A1024; --surface:#111936; --ink:#EDF0FA; --muted:#9BA6C9; --line:#2B3662;
  --accent:#93A8FF;
  --cover:#1B32A6; --cover-fg:#FFFFFF; --cover-soft:#C4CFFF;
  --tag:#E9EDF8; --tag-fg:#0F1A3A; --tag-line:#AEB8D6; --shadow:rgba(0,0,0,.6);
  --marker:#FFE45C; --marker-ink:#2E2600; --marker-soft:#26230F; --marker-line:#8C7A1A;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:17px; line-height:1.6;
  padding-inline:var(--gutter); padding-block:0 3rem;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent)}
a:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
p{margin:0}
h1,h2,h3{margin:0; text-wrap:balance}
.page{max-width:1160px; margin-inline:auto}

.mono{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase}

/* draft markers */
.draftbar{
  display:flex; flex-wrap:wrap; gap:.4rem .75rem; align-items:center;
  margin-top:1rem; padding:.7rem 1rem;
  background:var(--marker-soft); border:1.5px dashed var(--marker-line);
  font-size:.9rem;
}
.needs{
  display:inline-block; padding:.15rem .6rem; border-radius:999px;
  background:var(--marker); color:var(--marker-ink);
  font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500;
  white-space:nowrap;
}
.note{
  display:grid; gap:.6rem; justify-items:start;
  padding:1.25rem; background:var(--marker-soft); border:1.5px dashed var(--marker-line);
  max-width:44rem;
}

/* top bar */
.top{
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:.5rem 2rem;
  padding-block:1.4rem;
}
.wordmark{font-family:var(--display); font-size:1.35rem; font-weight:600; color:var(--ink); text-decoration:none; letter-spacing:-.01em}
.top nav{display:flex; flex-wrap:wrap; gap:.3rem 1.25rem}
.top nav a{color:var(--muted); text-decoration:none; font-size:.92rem; font-weight:500}
.top nav a:hover{color:var(--accent)}

/* cover */
.cover{
  display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:2.5rem 3rem; align-items:end;
  background:var(--cover); color:var(--cover-fg);
  padding:clamp(1.75rem,5vw,4rem);
}
.cover .mono{color:var(--cover-soft)}
.cover h1{
  font-family:var(--display); font-weight:500; font-size:clamp(3.2rem,10vw,7.75rem);
  line-height:.9; letter-spacing:-.025em; margin-block:1.25rem 1.75rem;
}
.cover h1 em{font-style:italic; font-weight:400}
.lede{font-size:clamp(1.05rem,1.6vw,1.25rem); line-height:1.5; max-width:34rem; color:var(--cover-fg)}
.actions{display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem}
.btn{
  display:inline-block; padding:.8rem 1.3rem; font-weight:600; font-size:.95rem; text-decoration:none;
  border:1.5px solid var(--cover-fg);
}
.btn.solid{background:var(--cover-fg); color:var(--cover)}
.btn.ghost{background:transparent; color:var(--cover-fg)}
.btn:hover{transform:translateY(-1px)}
.cover a:focus-visible{outline-color:var(--cover-fg)}

.lately{
  justify-self:stretch; display:grid; gap:.6rem; align-self:end;
  background:var(--tag); color:var(--tag-fg); padding:1.4rem 1.5rem .6rem;
  box-shadow:0 18px 36px -20px var(--shadow);
}
.cover .lately .mono{color:var(--cover)}
.lately ul{list-style:none; margin:0; padding:0}
.lately li + li{border-top:1px dashed var(--tag-line)}
.lately a{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.15rem 1rem; padding-block:.9rem; color:var(--tag-fg); text-decoration:none}
.lately .when{grid-column:1; font-family:var(--mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; opacity:.7}
.lately .what{grid-column:1; font-weight:600; line-height:1.35}
.lately .go{grid-column:2; grid-row:1 / span 2; align-self:center; color:var(--cover); font-size:1.1rem}
.lately a:hover .what{text-decoration:underline; text-underline-offset:3px}
.lately a:focus-visible{outline:2px solid var(--cover); outline-offset:2px}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto} .btn:hover{transform:none}}

/* bands */
.band{
  display:grid; grid-template-columns:minmax(0,15rem) minmax(0,1fr); gap:1.75rem 3.5rem;
  padding-block:clamp(3rem,7vw,5.25rem); border-bottom:1px dashed var(--line);
}
.band > header{display:grid; gap:.75rem; align-content:start}
.band > header .mono{color:var(--accent)}
.band h2{font-family:var(--display); font-weight:500; font-size:clamp(2rem,4vw,2.9rem); line-height:1; letter-spacing:-.015em}
.band > header p{color:var(--muted); font-size:.95rem; max-width:22rem}
.stack{display:grid; gap:2.25rem; min-width:0}
.prose{display:grid; gap:1rem; max-width:40rem}
h3.sub{font-family:var(--mono); font-size:.75rem; letter-spacing:.08em; text-transform:uppercase; font-weight:500; color:var(--muted)}

.pull{font-family:var(--display); font-style:italic; font-weight:400; font-size:clamp(1.7rem,3.4vw,2.6rem); line-height:1.12; letter-spacing:-.01em; margin:0; max-width:36rem}
.pull cite, .feature cite{display:block; margin-top:.9rem; font-family:var(--mono); font-style:normal; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}

/* line sheet rows */
.rows{list-style:none; margin:0; padding:0; border-top:1px dashed var(--line)}
.row{
  display:grid; grid-template-columns:3.75rem 11.5rem minmax(0,1fr) auto; gap:.2rem 1.25rem; align-items:baseline;
  padding-block:1.05rem; border-bottom:1px dashed var(--line);
  color:var(--ink); text-decoration:none;
}
.row .season{font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--accent); font-variant-numeric:tabular-nums}
.row .outlet{font-weight:700; font-size:.95rem}
.row .title{min-width:0; line-height:1.4}
.row .title small{display:block; margin-top:.3rem; font-size:.88rem; color:var(--muted)}
.row .kind{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); white-space:nowrap}
a.row:hover .title{color:var(--accent); text-decoration:underline; text-underline-offset:3px}
a.row:hover .kind{color:var(--accent)}

/* feature */
.feature{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:1.75rem 2.5rem;
  background:var(--surface); border:1px solid var(--line); padding:clamp(1.25rem,3vw,2.25rem);
}
.feature > div{display:grid; gap:.9rem; align-content:start; min-width:0}
.feature .mono{color:var(--accent)}
.feature h3{font-family:var(--display); font-weight:500; font-size:clamp(1.55rem,2.7vw,2.15rem); line-height:1.1; letter-spacing:-.01em}
.feature .by{color:var(--muted); font-size:.92rem}
.feature blockquote{margin:0; padding-left:1.1rem; border-left:2px solid var(--accent); font-size:1.08rem; line-height:1.5}
.links{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; font-weight:600; font-size:.95rem}
.links a{text-underline-offset:3px}

/* chips */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; list-style:none; margin:0; padding:0}
.chips li{padding:.3rem .8rem; border:1px solid var(--line); border-radius:999px; font-size:.88rem; background:var(--surface)}

/* work grid */
.work{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem 2rem; list-style:none; margin:0; padding:0}
.work li{display:grid; gap:.45rem; align-content:start; padding-top:.9rem; border-top:2px solid var(--ink); min-width:0}
.work .season{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; color:var(--accent)}
.work h3{font-size:1.08rem; font-weight:700; line-height:1.25}
.work p{font-size:.95rem; color:var(--muted)}
.work .motto{font-family:var(--display); font-style:italic; font-size:1.12rem; line-height:1.3; color:var(--ink)}
.work .steps{margin:0; padding-left:1.2rem; display:grid; gap:.25rem; font-size:.95rem; color:var(--muted)}
.work .steps li{display:list-item; padding:0; border:0; gap:0}
.work .steps li::marker{font-family:var(--mono); color:var(--accent)}
.work a{font-size:.88rem; font-weight:600; text-underline-offset:3px}

.path{list-style:none; margin:0; padding:0; border-top:1px dashed var(--line)}
.path li{display:grid; grid-template-columns:5.5rem minmax(0,1fr); gap:1rem; padding-block:.7rem; border-bottom:1px dashed var(--line); align-items:baseline}
.path span{font-family:var(--mono); font-size:.78rem; letter-spacing:.06em; color:var(--accent); font-variant-numeric:tabular-nums}

.boards{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2rem; list-style:none; margin:0; padding:0}
.boards li{display:grid; gap:.45rem; align-content:start; min-width:0}
.boards .role{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.boards h3{font-family:var(--display); font-weight:500; font-size:1.55rem; line-height:1.1}
.boards p{font-size:.95rem; color:var(--muted)}
.boards a{font-size:.88rem; font-weight:600; text-underline-offset:3px}

.email{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.25rem}
#email-text{font-family:var(--display); font-size:clamp(1.35rem,3.6vw,2.2rem); line-height:1.15; letter-spacing:-.01em; overflow-wrap:anywhere; min-width:0; user-select:all}
#copy-email{font:600 .9rem var(--body); padding:.6rem 1rem; background:var(--surface); color:var(--ink); border:1.5px solid var(--ink); cursor:pointer}
#copy-email:hover{background:var(--ink); color:var(--paper)}
#copy-email:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
#copy-status{color:var(--accent)}

.iggrid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem}
.igpost{display:grid; grid-template-rows:auto 1fr; background:var(--surface); border:1px solid var(--line); color:var(--ink); text-decoration:none; min-width:0}
.igpost img{display:block; width:100%; height:auto; aspect-ratio:3 / 2; object-fit:cover; max-width:100%}
.igtext{display:grid; gap:.5rem; align-content:start; padding:1.2rem 1.3rem 1.3rem}
.igtext .mono{color:var(--accent)}
.igtitle{font-family:var(--display); font-weight:500; font-size:clamp(1.3rem,1.9vw,1.6rem); line-height:1.15}
.igtext .kind{font-family:var(--mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.igpost:hover .igtitle{color:var(--accent); text-decoration:underline; text-underline-offset:4px}
.igpost:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
@media (max-width:640px){.iggrid{grid-template-columns:minmax(0,1fr)}}

.portrait{display:block; width:100%; max-width:15rem; height:auto; aspect-ratio:492 / 703; object-fit:cover; margin-top:.75rem; box-shadow:0 18px 36px -22px var(--shadow)}

.work.ideas-grid{grid-template-columns:repeat(2,minmax(0,1fr)); gap:2.25rem 2.5rem}
@media (max-width:860px){.work.ideas-grid{grid-template-columns:minmax(0,1fr)}}

footer{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem; padding-top:1.5rem; color:var(--muted); font-size:.85rem}

@media (max-width:860px){
  .cover{grid-template-columns:minmax(0,1fr); align-items:start}
  .lately{margin-top:.5rem}
  .band{grid-template-columns:minmax(0,1fr)}
  .feature{grid-template-columns:minmax(0,1fr)}
  .work,.boards{grid-template-columns:minmax(0,1fr)}
  .row{grid-template-columns:auto minmax(0,1fr)}
  .row .title,.row .kind{grid-column:1 / -1}
}
@media (min-width:861px) and (max-width:1040px){
  .work,.boards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .row{grid-template-columns:3.75rem 9rem minmax(0,1fr) auto}
}