/* connerking.com — "the sheet and the plates"
   The sheet (author chrome) never changes. A plate (client case study) overrides only the
   --c-* tokens; every block below is written once against them. */

@font-face{font-family:'Archivo';src:url(/fonts/archivo-variable-latin.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:optional}
@font-face{font-family:'Archivo';src:url(/fonts/archivo-italic-variable-latin.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-style:italic;font-display:optional}
@font-face{font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:98.60%;ascent-override:89.25%;descent-override:21.30%;line-gap-override:0%}
@font-face{font-family:'Martian Mono';src:url(/fonts/martian-mono-variable-latin.woff2) format('woff2');font-weight:100 800;font-stretch:75% 112.5%;font-display:optional}

:root{
  color-scheme:only light;
  --sheet:#EDEFEC; --sheet-2:#E1E4E0; --ink:#161A1D; --ink-2:#4B525A; --rule:#B8BDB9; --oxide:#A63A1F;
  /* client slot: on the sheet these resolve to the author's own values */
  --c-bg:var(--sheet); --c-bg2:var(--sheet-2); --c-fg:var(--ink); --c-fg2:var(--ink-2);
  --c-accent:var(--ink); --c-accent-text:var(--ink); --c-accent-sheet:var(--ink); --c-rule:var(--rule);
  --c-display:'Archivo'; --c-wdth:88; --c-wght:800; --c-case:none; --c-track:-0.015em;
  --sans:'Archivo','Archivo Fallback',system-ui,-apple-system,sans-serif; --mono:'Martian Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --gutter:clamp(16px,3vw,48px); --max:1360px; --rh:48px;
  --t-12:.75rem; --t-13:.8125rem; --t-14:.875rem; --t-17:1.0625rem; --t-22:1.375rem; --t-28:1.75rem; --t-36:2.25rem; --t-40:2.5rem; --t-48:3rem; --t-72:4.5rem;
  --sec:clamp(64px,8vw,96px); --blk:48px;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;background:var(--sheet)}
body{background:var(--sheet);color:var(--ink);font-family:var(--sans);font-size:var(--t-17);line-height:1.55;font-variation-settings:'wdth' 100,'wght' 400;-webkit-font-smoothing:antialiased}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.15em;text-decoration-color:var(--oxide)}
:focus-visible{outline:2px solid var(--oxide);outline-offset:2px}
html{scroll-padding-top:calc(var(--rh) + 16px)}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--sheet);padding:8px 12px;font-family:var(--mono);font-size:var(--t-13)}
.skip:focus{left:8px;z-index:99}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
@media (max-width:900px){.grid{gap:16px}}

/* ---- type roles ---- */
.lab{font-family:var(--sans);font-size:var(--t-12);line-height:1.3;letter-spacing:.06em;text-transform:uppercase;font-variation-settings:'wdth' 62,'wght' 600;color:var(--c-fg2)}
.mono{font-family:var(--mono);font-variation-settings:'wdth' 87.5,'wght' 400;font-size:var(--t-13);letter-spacing:0;font-feature-settings:'tnum'}
.fig{font-family:var(--mono);font-variation-settings:'wdth' 87.5,'wght' 600;font-feature-settings:'tnum';line-height:1}
.h-shell{font-family:var(--sans);font-variation-settings:'wdth' 88,'wght' 800;letter-spacing:-.015em;line-height:1.02}
.h-client{font-family:var(--c-display),var(--sans);font-variation-settings:'wdth' var(--c-wdth),'wght' var(--c-wght);font-weight:var(--c-wght);text-transform:var(--c-case);letter-spacing:var(--c-track);line-height:1.02;color:var(--c-fg)}
.lede{font-size:var(--t-22);line-height:1.35;font-variation-settings:'wdth' 100,'wght' 500;max-width:28em;text-wrap:pretty}
p{max-width:68ch;text-wrap:pretty}
p+p{margin-top:1em}

/* ---- rules and section heads ---- */
.sec{border-top:2px solid var(--c-fg);padding-top:10px;margin-top:var(--sec);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 16px;align-items:baseline}
.sec h2{font-size:var(--t-28);line-height:1.1;font-variation-settings:'wdth' 62,'wght' 700;text-transform:uppercase;letter-spacing:.02em}
.sec .mono{color:var(--c-fg2)}
hr{border:0;border-top:1px solid var(--c-rule);margin:0}

/* ---- running head: never skinned ---- */
.rh{position:sticky;top:0;z-index:50;height:var(--rh);background:var(--sheet);color:var(--ink);border-bottom:3px solid var(--oxide);display:flex;align-items:center;gap:24px;padding:0 var(--gutter);white-space:nowrap;overflow:hidden;font-variation-settings:'wdth' 75,'wght' 700;font-size:var(--t-14);letter-spacing:.08em;text-transform:uppercase}
.rh a,.rh nav{align-self:stretch}.rh a{display:inline-flex;align-items:center}
.rh nav{display:flex;gap:clamp(12px,2vw,28px);margin-left:auto}
.rh nav a{font-family:var(--mono);font-variation-settings:'wdth' 87.5,'wght' 500;font-size:var(--t-13);letter-spacing:.04em;text-transform:uppercase}
.rh .avail{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-variation-settings:'wdth' 87.5,'wght' 500;font-size:var(--t-12);letter-spacing:.04em}
.rh .avail::before{content:"";width:8px;height:8px;background:var(--oxide)}
@media (max-width:900px){.rh{gap:14px}.rh nav{gap:14px}.rh nav a:not(.keep){display:none}.rh .avail span{display:none}.rh>.mono{display:none}}

/* ---- buttons: square, one filled, one outlined ---- */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border:1px solid var(--c-fg);background:var(--c-fg);color:var(--c-bg);font-family:var(--sans);font-variation-settings:'wdth' 88,'wght' 600;font-size:var(--t-14);letter-spacing:.02em;transition:background .12s,color .12s}
.btn:hover{background:var(--c-bg);color:var(--c-fg);text-decoration:none}
.btn.ghost{background:transparent;color:var(--c-fg)}
.btn.ghost:hover{background:var(--c-fg);color:var(--c-bg)}
.input{height:48px;width:100%;padding:0 14px;border:1px solid var(--c-fg2);background:transparent;color:var(--c-fg);font:inherit;font-size:var(--t-17)}
.input:focus{outline:2px solid var(--oxide);outline-offset:0;border-color:var(--c-fg)}

/* ---- hero: sheet left, colour spine right ---- */
.hero{padding-top:clamp(40px,6vw,72px);padding-bottom:0}
.hero .grid{align-items:stretch}
.hero-copy{grid-column:1/8;display:flex;flex-direction:column;justify-content:flex-start;gap:28px;padding-bottom:clamp(40px,6vw,72px)}
.particulars{margin-top:auto}
.hero h1{font-size:clamp(2.75rem,6vw,var(--t-72));line-height:.95;font-variation-settings:'wdth' 78,'wght' 800;letter-spacing:-.01em}
.hero h1 span{display:block;font-variation-settings:'wdth' 100,'wght' 400;letter-spacing:0;color:var(--ink-2);font-size:.5em;margin-top:.35em}
.doors{display:flex;flex-wrap:wrap;gap:12px}
.particulars{color:var(--ink-2)}
.spine{grid-column:8/13;display:flex;flex-direction:column;margin-right:calc(-1*var(--gutter));min-height:560px}
.band{position:relative;flex:1 1 0;min-height:0;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto auto;align-content:center;column-gap:16px;row-gap:4px;padding:16px 24px;background:var(--c-bg);color:var(--c-fg);border-top:1px solid var(--c-rule);transition:background-color .12s ease-out}
.band[data-scheme=light]{border-top-color:var(--ink);border-bottom:1px solid var(--ink)}
.band .name{font-size:var(--t-22);font-variation-settings:'wdth' 100,'wght' 600;line-height:1.1;min-width:0}
.band .go{font-family:var(--mono);font-size:var(--t-17);line-height:1;color:var(--c-accent-text);align-self:center;transition:transform .12s ease-out}
.band .num{grid-column:1/-1;font-size:var(--t-14);line-height:1.3;color:var(--c-accent-text)}
.band .role{grid-column:1/-1;color:var(--c-fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.band:hover,.band:focus-visible{background:var(--c-bg2);text-decoration:none}
.band:hover .go,.band:focus-visible .go{transform:translateY(3px)}
@media (max-width:900px){
  .hero-copy,.spine{grid-column:1/-1}
  .spine{margin:0 calc(-1*var(--gutter));min-height:0}
  .band{flex:0 0 auto;padding:16px var(--gutter)}
}

/* ---- selected work: covers ---- */
.cover{background:var(--c-bg);color:var(--c-fg);border-top:1px solid var(--c-rule)}
.cover[data-scheme=light]{border-top-color:var(--ink);border-bottom:1px solid var(--ink)}
.work .sec{margin-bottom:24px}
.cover-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:24px 48px;align-items:center;padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px)}
.cover-copy{grid-column:1/6;display:flex;flex-direction:column;gap:20px;min-width:0}
.cover-media{grid-column:6/13;min-width:0}
.cover--flip .cover-copy{grid-column:8/13;order:2}
.cover--flip .cover-media{grid-column:1/8;order:1}
.cover-name{font-size:clamp(2.25rem,4vw,3.5rem);line-height:1;font-variation-settings:'wdth' 88,'wght' 800;letter-spacing:-.015em;text-wrap:balance}
.cover-meta{color:var(--c-fg2);margin-top:-8px}
.cover-meta .launching,.cover-actions .launching{color:var(--c-accent-text);font-variation-settings:'wdth' 87.5,'wght' 600}
.cover-intro{max-width:46ch}
.cover-figs{display:grid;grid-template-columns:auto 1fr;border-top:2px solid var(--c-fg);margin:0}
.cover-figs dt,.cover-figs dd{margin:0;padding:10px 0;border-bottom:1px solid var(--c-rule)}
.cover-figs dt{font-family:var(--mono);font-variation-settings:'wdth' 87.5,'wght' 600;font-feature-settings:'tnum';font-size:var(--t-22);line-height:1.1;color:var(--c-accent-text);padding-right:16px}
.cover-figs dd{display:flex;align-items:center;font-size:var(--t-14);line-height:1.45;color:var(--c-fg2)}
.cover-figure{font-size:var(--t-28);line-height:1.15;color:var(--c-accent-text);border-top:2px solid var(--c-fg);padding-top:14px}
.cover-tags{display:flex;flex-wrap:wrap;gap:6px}
.cover-tags span{font-family:var(--mono);font-variation-settings:'wdth' 87.5,'wght' 400;font-size:var(--t-12);padding:4px 8px;border:1px solid var(--c-fg2)}
.cover-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:4px}
.cover-shot{display:block;position:relative;aspect-ratio:16/10;overflow:hidden;container-type:size;border:1px solid var(--c-rule);background:var(--c-bg2)}
.cover-shot picture{display:block}
.cover-shot img{display:block;width:100%;height:auto;transform:translateY(0);transition:transform .8s cubic-bezier(.2,0,0,1)}
@media (hover:hover) and (pointer:fine){
  .cover-shot:hover img,.cover:focus-within .cover-shot img{transform:translateY(calc(-100% + 100cqh));transition-duration:var(--pan,6s);transition-timing-function:cubic-bezier(.45,0,.55,1)}
}
.cover-cap{display:flex;justify-content:space-between;gap:16px;margin-top:8px;color:var(--c-fg2)}
.cover-cap .hint{display:none}
@media (hover:hover) and (pointer:fine){.cover-cap .hint{display:inline}}
.cover-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}
.cover-thumb .frame{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--c-rule);background:var(--c-bg2)}
.cover-thumb picture{display:block;height:100%}
.cover-thumb img{width:100%;height:100%;object-fit:cover;object-position:top}
@media (max-width:900px){
  .cover-grid{gap:24px}
  .cover-copy,.cover-media,.cover--flip .cover-copy,.cover--flip .cover-media{grid-column:1/-1;order:0}
  .cover-media{order:2}
  .cover-thumbs{display:none}
}
@media (prefers-reduced-motion:reduce){.cover-shot img{transform:none!important}}

/* ---- ledger ---- */
.ledger{width:100%;border-collapse:collapse;font-family:var(--mono);font-variation-settings:'wdth' 87.5,'wght' 400;font-size:var(--t-14);font-feature-settings:'tnum'}
.ledger th{text-align:left;font-weight:600;font-variation-settings:'wdth' 87.5,'wght' 600;padding:12px 12px 12px 0;border-bottom:2px solid var(--ink);font-size:var(--t-12);letter-spacing:.06em;text-transform:uppercase}
.ledger td{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.ledger tr.row{transition:background .12s,color .12s}
.ledger tr.row:hover{background:var(--c-bg);color:var(--c-fg)}
.ledger tr.row:hover td{border-color:var(--c-rule)}
.ledger .client{font-family:var(--sans);font-size:var(--t-17);font-variation-settings:'wdth' 100,'wght' 600}
.ledger .num{color:var(--c-accent-sheet);font-weight:600;font-variation-settings:'wdth' 87.5,'wght' 600}
.ledger .empty{color:var(--ink-2)}
.ledger tr.row:hover .num{color:var(--c-accent-text)}
.ledger .short{display:none}
.ledger tfoot td{border-bottom:0;border-top:2px solid var(--ink);color:var(--ink-2);font-family:var(--sans);font-size:var(--t-14);line-height:1.5}
@media (max-width:900px){#ledger .ledger{table-layout:fixed}#ledger .ledger .opt,#ledger .ledger th:first-child,#ledger .ledger td:first-child{display:none}#ledger .ledger td,#ledger .ledger th{padding-right:8px;overflow-wrap:anywhere}#experience .ledger td:first-child{white-space:nowrap;padding-right:12px;width:1%}.ledger .client{font-size:var(--t-14)}.ledger .full{display:none}.ledger .short{display:inline}}

/* ---- about ---- */
.about{margin-top:var(--blk)}
.about .portrait{grid-column:1/5}
.about .portrait img{border:1px solid var(--ink);aspect-ratio:3/4;object-fit:cover;width:100%}
.about .portrait .mono{margin-top:8px;color:var(--ink-2)}
.about .copy{grid-column:5/12}
.about h3{font-size:var(--t-36);line-height:1.08;font-variation-settings:'wdth' 88,'wght' 700;letter-spacing:-.01em;margin-bottom:20px;text-wrap:balance}
.dl{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--ink);margin-top:28px}
.dl>div{padding:14px 16px;border-right:1px solid var(--ink)}
.dl>div:last-child{border-right:0}
.dl .v{font-variation-settings:'wdth' 100,'wght' 600;margin-top:6px}
.facts{display:flex;flex-wrap:wrap;gap:0 32px;margin-top:20px}
.facts div{padding:10px 0;color:var(--ink-2)}
.facts .v{color:var(--ink);font-variation-settings:'wdth' 87.5,'wght' 600}
@media (max-width:900px){.about .portrait,.about .copy{grid-column:1/-1}.about .portrait{max-width:280px}.dl{grid-template-columns:1fr}.dl>div{border-right:0;border-bottom:1px solid var(--ink)}.dl>div:last-child{border-bottom:0}}

/* ---- title block (drafting sheet) ---- */
.tb{display:grid;grid-template-columns:repeat(12,1fr);border:1px solid var(--ink);margin-top:var(--blk)}
.tb>div{padding:14px 16px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);min-width:0}
.tb .c12{grid-column:span 12}.tb .c8{grid-column:span 8}.tb .c6{grid-column:span 6}.tb .c4{grid-column:span 4}.tb .c3{grid-column:span 3}.tb .c2{grid-column:span 2}
.tb .lab{display:block;margin-bottom:6px}
.tb .v{font-variation-settings:'wdth' 100,'wght' 500;font-size:var(--t-17);line-height:1.4}
.tb .v.mono{font-size:var(--t-14);font-variation-settings:'wdth' 87.5,'wght' 400}
.tb .c12 .v:not(.mono){display:block;max-width:68ch}
.tb .title{display:flex;gap:20px;align-items:baseline}
.tb .title .lab{margin:0;flex:0 0 auto}
.tb .title .v{font-size:clamp(var(--t-28),4vw,var(--t-48));line-height:1;font-variation-settings:'wdth' 88,'wght' 700;letter-spacing:-.01em}
.tb .tags{display:flex;flex-wrap:wrap;gap:6px}
.tb .tags span,.tb .tags a{display:inline-block;font-family:var(--mono);font-variation-settings:'wdth' 87.5,'wght' 400;font-size:var(--t-12);padding:4px 8px;border:1px solid var(--ink-2)}
.tb .v a,.ledger td a{display:inline-block;padding:8px 0;margin:-8px 0}
@media (max-width:900px){.tb>div{grid-column:span 12!important;border-right:0}}

/* ---- plate: a client case study ---- */
.plate{background:var(--c-bg);color:var(--c-fg);margin-top:var(--blk)}
.plate[data-scheme=light]{border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.plate .wrap{padding-top:clamp(48px,6vw,80px);padding-bottom:clamp(64px,8vw,112px)}
.plate h1.h-client{font-size:clamp(2.5rem,5.5vw,var(--t-72))}
.plate .outcome{font-size:var(--t-22);line-height:1.35;max-width:30em;margin-top:20px;color:var(--c-fg)}
.plate .meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:20px;color:var(--c-fg2)}
.plate .meta .launching{color:var(--c-accent-text);font-weight:600;font-variation-settings:'wdth' 87.5,'wght' 600}
.plate-hero{margin-top:40px;border:1px solid var(--c-rule);max-height:72vh;overflow:hidden;background:var(--c-bg2)}
.plate-hero img{width:100%;object-fit:cover;object-position:top}
@media (min-width:901px){.plate-hero{max-height:none;aspect-ratio:16/9}.plate-hero img{height:100%}}
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));border-top:2px solid var(--c-fg);margin-top:var(--blk)}
.figs>div{padding:20px 20px 20px 0;border-bottom:1px solid var(--c-rule)}
.figs .fig{font-size:var(--t-40);color:var(--c-accent-text)}
.figs .lab{margin-top:10px;color:var(--c-fg);text-transform:none;letter-spacing:0;font-size:var(--t-14);line-height:1.45;font-variation-settings:'wdth' 100,'wght' 400}
.figs .src{margin-top:8px;color:var(--c-fg2);font-size:var(--t-12);line-height:1.4}
.chapter{margin-top:var(--sec)}
.chapter h2{font-size:clamp(var(--t-28),3vw,var(--t-36));margin-bottom:16px;text-wrap:balance}
.chapter .prose{grid-column:1/8}
.chapter .prose p{color:var(--c-fg)}
.chapter .shots{grid-column:8/13;display:grid;grid-template-columns:3fr 1.3fr;gap:12px;align-items:start}
.shot-frame{border:1px solid var(--c-rule);overflow:hidden;background:var(--c-bg2);max-height:520px}
.shot-frame img{width:100%;object-fit:cover;object-position:top}
.cap{margin-top:8px;color:var(--c-fg2)}
@media (max-width:900px){.chapter .prose,.chapter .shots{grid-column:1/-1}.chapter .shots{grid-template-columns:1fr}.chapter .shots>div:first-child:not(:only-child){display:none}}
.brand{margin-top:var(--sec);display:grid;grid-template-columns:repeat(12,1fr);gap:24px}
.brand .spec{grid-column:1/8}
.brand .spec .big{font-size:clamp(var(--t-40),6vw,var(--t-72));line-height:1}
.brand .spec .mid{font-size:var(--t-28);margin-top:12px}
.brand .sw{grid-column:8/13;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.brand .sw{gap:0;border-top:1px solid var(--c-rule)}
.brand .sw>div{border-bottom:1px solid var(--c-rule);padding:12px 12px 12px 0}
.brand .sw .chip{height:56px;margin-bottom:10px;border:1px solid var(--c-rule)}
.brand .note{grid-column:1/-1;color:var(--c-fg2);max-width:68ch;font-size:var(--t-14);line-height:1.5}
@media (max-width:900px){.brand .spec,.brand .sw{grid-column:1/-1}}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:var(--blk)}
.gallery figure{border:1px solid var(--c-rule);background:var(--c-bg2)}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.gallery figcaption{padding:10px 12px;font-size:var(--t-14);line-height:1.45;color:var(--c-fg2)}
.credits{margin-top:var(--sec);display:grid;grid-template-columns:max-content 1fr;border-top:2px solid var(--c-fg)}
.credits>*{padding:12px 24px 12px 0;border-bottom:1px solid var(--c-rule)}
.credits .k{color:var(--c-fg2)}
.next{display:block;margin-top:var(--sec);padding:40px var(--gutter);background:var(--c-bg);color:var(--c-fg);border-top:2px solid var(--ink)}
.next .wrap{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;padding:0 0 0 0}
.next .name{font-size:clamp(var(--t-28),4vw,var(--t-48));line-height:1}
.next .title{display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.next:hover{text-decoration:none}

/* ---- overview sheet ---- */
.overview .tb{margin-top:24px}

/* ---- footer title block ---- */
.foot{margin-top:var(--sec);padding-bottom:48px}
.foot .tb{margin-top:0}

/* ---- motion: the page turn only ---- */
@view-transition{navigation:auto}
::view-transition-old(plate),::view-transition-new(plate){animation-duration:.32s;animation-timing-function:cubic-bezier(.2,0,0,1)}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}