/* Rook Web Consulting — "Dark studio": one dark look on purpose, with a single painting sliced through the pages. */
@font-face{font-family:"IBM Plex Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-condensed-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:600;font-style:normal;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Sans Condensed";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-weight:800;font-style:normal;font-display:swap;src:url(/assets/fonts/bricolage-grotesque-latin-800-normal.woff2) format("woff2")}

:root{
  --paper:#0B1217; --ink:#E3EAE6; --muted:#8D9CA5; --rule:#22313A;
  --teal:#45B9A7; --amber:#C8642A; --on-teal:#0B1217;
  --display:"IBM Plex Sans Condensed","Arial Narrow",Arial,sans-serif;
  --body:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --logo:"Bricolage Grotesque","Helvetica Neue",Arial,sans-serif;
  --art:url(/assets/img/art.webp);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:1.02rem;line-height:1.65}
img{max-width:100%;height:auto}
.col{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--teal);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
h1,h2,h3{font-family:var(--display);margin:0;text-wrap:balance}
p{margin:0}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:16px;z-index:30;background:var(--ink);color:var(--paper);padding:8px 12px}

/* masthead */
.mast{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;padding-block:22px;border-bottom:2px solid var(--teal)}
.word{font-family:var(--logo);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--ink);text-decoration:none;line-height:1;white-space:nowrap}
.word span{color:var(--teal)}
nav.links{display:flex;align-items:center;gap:6px 22px;flex-wrap:wrap;font-family:var(--display);font-size:.98rem}
nav.links a{color:var(--ink);text-decoration:none;padding-block:4px;border-bottom:2px solid transparent}
nav.links a[aria-current="page"]{border-bottom-color:var(--teal);font-weight:600}
nav.links a.cta{border:1.5px solid var(--ink);border-radius:2px;padding:6px 12px;font-weight:600}
nav.links a.cta:hover{background:var(--ink);color:var(--paper)}

/* page heads */
.hero{padding-block:clamp(40px,7vw,80px) clamp(40px,6vw,64px)}
.hero h1{font-weight:600;line-height:1.05;letter-spacing:-.02em;font-size:clamp(2.2rem,5vw,3.9rem);max-width:22ch}
.hero h1 .t{color:var(--teal)}
.eyebrow{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.hero .under{display:grid;grid-template-columns:repeat(8,1fr);margin-top:clamp(28px,4vw,44px)}
.hero .under > div{grid-column:4 / 9;min-width:0}
.hero .under p{font-size:clamp(1.12rem,1.7vw,1.3rem);line-height:1.55;max-width:42ch}
.hero .under p + p{margin-top:18px;font-family:var(--display);font-size:1rem}

/* sections */
.blk{display:grid;grid-template-columns:repeat(8,1fr);padding-block:clamp(40px,6vw,72px)}
.blk > h2{grid-column:1 / 4;font-weight:700;font-size:clamp(1.6rem,3vw,2.3rem);line-height:1;letter-spacing:-.01em;padding-right:24px}
.blk > h2::before{content:"// ";font-family:var(--mono);font-weight:400;color:var(--teal)}
.blk > .body{grid-column:4 / 9;min-width:0}
.body > p{max-width:58ch}
.body > p + p{margin-top:16px}
.more{display:inline-block;margin-top:24px;font-family:var(--display);font-weight:600}

/* rows */
.rows{list-style:none;margin:0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,11rem) minmax(0,1fr);gap:8px 24px;padding-block:16px;border-bottom:1px solid var(--rule)}
.rows li:first-child{padding-top:0}
.rows li:last-child{border-bottom:0}
.rows .k{font-family:var(--mono);font-weight:500;font-size:.92rem;line-height:1.45}
.rows .k em{display:block;font-style:normal;font-family:var(--body);font-weight:400;font-size:.85rem;color:var(--muted);margin-top:2px}
.rows .v{min-width:0}
.rows .v small{display:block;margin-top:6px;font-family:var(--display);font-size:.85rem;color:var(--muted)}
.rows .v ul{margin:10px 0 0;padding-left:1.1em}
.rows .v ul li{display:list-item;border:0;padding:0 0 4px}
.n{font-family:var(--mono);font-weight:500;color:var(--teal);font-variant-numeric:tabular-nums;white-space:nowrap}
.co{font-family:var(--mono);font-weight:500;font-size:.85rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}

/* steps */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:4px 16px;padding-block:14px;border-bottom:1px solid var(--rule)}
.steps li:first-child{padding-top:0}
.steps li:last-child{border-bottom:0}
.steps li::before{content:counter(s);font-family:var(--mono);font-weight:500;font-size:1.3rem;line-height:1.3;color:var(--teal)}
.steps b{font-family:var(--display);font-weight:700;display:block}

/* accordion */
.acc details{border-bottom:1px solid var(--rule)}
.acc details:first-child summary{padding-top:0}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-block:14px}
.acc summary::-webkit-details-marker{display:none}
.acc summary h3{margin:0;font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1.35}
.acc summary::after{content:"+";font-family:var(--display);font-size:1.3rem;line-height:1;color:var(--teal);flex:none;transition:transform .2s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc details p{padding-bottom:16px;max-width:58ch}

/* team */
.headshot{display:block;width:100%;max-width:220px;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;margin-bottom:16px}
.spec{list-style:none;margin:16px 0 0;padding:0;font-family:var(--display);font-size:.95rem}
.spec li{display:block;border:0;padding:0 0 6px}
.spec b{font-weight:700}

/* painting slices */
.art{background-image:var(--art);background-size:100% auto;background-repeat:no-repeat;background-position:50% calc(var(--y,0%) + var(--shift,0px));border-radius:6px;width:100%;box-shadow:0 0 0 1px var(--rule)}
.hero-art{margin:0 0 clamp(28px,4vw,44px)}
.hero-art .art{aspect-ratio:5/2}
.strip .art{height:clamp(56px,8vw,100px)}

/* contact */
.contact{background:var(--teal);color:var(--on-teal);margin-top:clamp(24px,4vw,48px)}
.contact .col{padding-block:clamp(48px,8vw,96px)}
.contact h2{font-weight:600;line-height:1.05;letter-spacing:-.02em;font-size:clamp(2.2rem,5vw,3.8rem);max-width:16ch}
.contact .grid{display:grid;grid-template-columns:repeat(8,1fr);margin-top:28px}
.contact .grid > div{grid-column:4 / 9;min-width:0}
.contact p{font-size:1.15rem;max-width:42ch}
.mailrow{display:flex;gap:10px 16px;align-items:center;flex-wrap:wrap;margin-top:24px}
.mail{color:inherit;text-decoration:none;font-family:var(--display);font-weight:700;font-size:clamp(1.15rem,3vw,1.7rem);overflow-wrap:anywhere;border-bottom:2px solid currentColor}
button.copy{font-family:var(--display);font-weight:600;font-size:.9rem;background:transparent;color:inherit;border:1.5px solid currentColor;border-radius:2px;padding:7px 12px;cursor:pointer}
button.copy:hover{background:var(--on-teal);color:var(--teal)}
#copied{font-family:var(--display);font-size:.85rem}
footer{padding-block:20px;font-family:var(--mono);font-size:.8rem;color:var(--muted);display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
footer a{color:var(--muted)}

/* subtle motion */
.headshot{transition:transform .4s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion: no-preference){
  .hero h1,.hero .eyebrow{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero .under{animation:rise .7s cubic-bezier(.2,.7,.2,1) .12s both}
  .hero-art{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .acc details[open] p{animation:drop .3s ease both}
  @keyframes drop{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
  nav.links a:not(.cta){background:linear-gradient(var(--teal),var(--teal)) 0 100%/0 2px no-repeat;transition:background-size .25s ease}
  nav.links a:not(.cta):hover{background-size:100% 2px;border-bottom-color:transparent}
  nav.links a.cta,button.copy{transition:background-color .2s,color .2s}
}
@media (prefers-reduced-motion: reduce){.acc summary::after{transition:none}}

@media (max-width:760px){
  .hero .under,.blk,.contact .grid{grid-template-columns:1fr}
  .hero .under > div,.blk > h2,.blk > .body,.contact .grid > div{grid-column:1 / -1}
  .blk > h2{margin-bottom:20px;padding-right:0}
}
@media (max-width:480px){
  .rows li{grid-template-columns:1fr}
}
.rows .v ul.spec{padding-left:0}