:root{
  --paper:#f3f1ea;
  --ink:#171715;
  --muted:#68645d;
  --rule:#c9c5bb;
  --accent:#8f251e;
  --serif:"Iowan Old Style",Baskerville,Georgia,serif;
  --display:"Times New Roman",Times,serif;
  --mono:Monaco,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box}
html{background:var(--paper);color:var(--ink)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--serif);-webkit-font-smoothing:none;text-rendering:geometricPrecision;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 1v27M1 14.5h27' stroke='%23171715' stroke-width='1.2'/%3E%3Ccircle cx='14.5' cy='14.5' r='2.2' fill='%238f251e'/%3E%3C/svg%3E") 14 14, crosshair}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none;cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='29' height='29' viewBox='0 0 29 29'%3E%3Cpath d='M14.5 1v27M1 14.5h27' stroke='%23171715' stroke-width='1.2'/%3E%3Ccircle cx='14.5' cy='14.5' r='2.2' fill='%238f251e'/%3E%3C/svg%3E") 14 14, crosshair}
::selection{background:var(--ink);color:var(--paper)}
.skip{position:absolute;left:-9999px;top:8px}
.skip:focus{left:8px;z-index:99;background:var(--paper);border:1px solid var(--ink);padding:8px 10px}
a:focus-visible{outline:1px dotted var(--ink);outline-offset:4px}
.shell{width:min(1440px,calc(100% - 56px));margin:0 auto;min-height:100svh;display:flex;flex-direction:column}
.site-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:start;padding:22px 0 16px;border-bottom:1px solid var(--rule)}
.brand{font-family:var(--display);font-size:17px;line-height:1}
.brand small{font-family:var(--mono);display:block;margin-top:5px;font-size:11px;line-height:1.4;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;gap:20px;font-family:var(--mono);font-size:12px;line-height:1.4;letter-spacing:.055em;text-transform:uppercase}
.nav a{padding:0 0 3px}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent);border-bottom:1px solid currentColor}
.meta,.caption,.index-row,.footer,.eyebrow{font-family:var(--mono);font-size:12px;line-height:1.45;letter-spacing:.045em;text-transform:uppercase}
.meta,.caption,.eyebrow{color:var(--muted)}
.section{padding:84px 0 100px;flex:1}
.section-head{display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;margin-bottom:48px}
.section-title{font-family:var(--display);margin:0;font-size:clamp(36px,4.1vw,62px);line-height:.98;letter-spacing:-.035em;font-weight:400}
.section-note{max-width:340px;text-align:right;color:var(--muted);font-size:15px;line-height:1.35}
.section-note p{margin:0}
.work-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:58px 18px}
.work-grid figure{margin:0;min-width:0}
.work-grid figure:nth-child(1){grid-column:1/span 7}
.work-grid figure:nth-child(2){grid-column:9/span 4;margin-top:8vh}
.work-grid figure:nth-child(3){grid-column:3/span 6;margin-top:1vh}
.work-grid img{width:100%;height:auto}
.caption{display:flex;justify-content:space-between;gap:14px;margin-top:8px}
.caption strong{font-weight:400;color:var(--ink)}
.archive-list{border-top:1px solid var(--rule)}
.index-row{display:grid;grid-template-columns:54px 1.65fr 1fr .55fr;gap:18px;padding:13px 0 11px;border-bottom:1px solid var(--rule)}
.index-row:hover .title{text-decoration:underline;text-underline-offset:3px}
.index-row .muted{color:var(--muted)}
.info-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:64px}
.info-copy{max-width:680px;font-size:clamp(24px,2.7vw,40px);line-height:1.04;letter-spacing:-.025em}
.info-copy p{margin:0}
.info-copy p+p{margin-top:20px}
.info-small{display:grid;grid-template-columns:1fr 1fr;gap:32px;font-size:14px;line-height:1.45}
.info-small p{margin:0}
.info-links{display:grid;gap:8px}
.info-links a{padding:8px 0;border-bottom:1px solid var(--rule);font-family:var(--mono);font-size:11px;letter-spacing:.045em;text-transform:uppercase}
.info-links a:hover{border-color:var(--ink)}
.footer{border-top:1px solid var(--rule);padding:14px 0 22px;color:var(--muted);display:flex;justify-content:space-between;gap:20px}
.back{display:inline-block;margin-top:38px;font-family:var(--mono);font-size:11px;letter-spacing:.045em;text-transform:uppercase;border-bottom:1px solid var(--rule)}

/* COLE CALFEE — 1994 */
body.landing{
  width:100%;
  min-height:100svh;
  overflow:hidden;
  background:#b9b9b4;
  color:#111;
  font-family:var(--mono);
}
.landing-frame{
  width:100%;
  min-height:100svh;
  display:grid;
  place-items:center;
  padding:24px;
}
.seven{
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
  gap:0;
  max-width:100%;
  font-size:13px;
  line-height:1;
  letter-spacing:.02em;
  text-transform:uppercase;
  white-space:normal;
  text-align:center;
}
.seven > *{
  display:inline-block;
}
.seven > * + *::before{
  content:" / ";
  white-space:pre;
  color:#111;
}
.seven .name{
  font-weight:700;
}
.seven a{
  text-decoration:none;
}
.seven a:hover,
.seven a:focus-visible{
  background:#111;
  color:#b9b9b4;
  outline:none;
}

@media(max-width:850px){
  .shell{width:calc(100% - 28px)}
  .site-head{grid-template-columns:1fr;padding-top:17px}
  .nav{gap:14px;flex-wrap:wrap}
  .section{padding:64px 0 80px}
  .section-head{grid-template-columns:1fr;gap:18px;margin-bottom:34px}
  .section-note{text-align:left}
  .work-grid{display:block}
  .work-grid figure,.work-grid figure:nth-child(n){width:100%;margin:0 0 72px}
  .work-grid figure:nth-child(2n){width:82%;margin-left:auto}
  .index-row{grid-template-columns:40px 1fr}
  .index-row .type,.index-row .year{display:none}
  .info-grid{grid-template-columns:1fr;gap:48px}
  .info-small{grid-template-columns:1fr}
}
@media(max-width:560px){
  .landing-frame{padding:28px 22px}
  .seven{
    width:min(260px,100%);
    font-size:13px;
    line-height:2.15;
  }
}

/* Visitor paper tones */
html[data-tone="tan"]{--paper:#d7c4a4;--ink:#3a2b21;--muted:#6d5848;--rule:#b49c7d;--accent:#7f2f25}
html[data-tone="brown"]{--paper:#725847;--ink:#f3eadf;--muted:#d2c1b0;--rule:#967765;--accent:#f0c6a8}
html[data-tone="white"]{--paper:#f7f7f3;--ink:#171715;--muted:#6e6e67;--rule:#d7d7d0;--accent:#8f251e}
html[data-tone="gray"]{--paper:#b9b9b4;--ink:#11110f;--muted:#595a55;--rule:#9e9f99;--accent:#8f251e}
html[data-tone="purple"]{--paper:#75687f;--ink:#f2ede8;--muted:#d4cbd7;--rule:#988ca0;--accent:#f0c4a0}
html[data-tone="sienna"]{--paper:#a65336;--ink:#f7efe7;--muted:#e0c6b8;--rule:#c07a5f;--accent:#f2cfb7}
html[data-tone="umber"]{--paper:#68493a;--ink:#f4ede7;--muted:#d7c6ba;--rule:#8b6a59;--accent:#efc6a9}
html[data-tone="mustard"]{--paper:#d9b23f;--ink:#2e2615;--muted:#695b2f;--rule:#b88f2f;--accent:#7f2f25}
html[data-tone="marigold"]{--paper:#e2a52f;--ink:#302313;--muted:#6f5528;--rule:#bf8326;--accent:#7f2f25}
html[data-tone="pulp-orange"]{--paper:#d97833;--ink:#2f1d16;--muted:#6d4534;--rule:#b35e29;--accent:#f4e2c8}
html[data-tone="peach"]{--paper:#e8b07b;--ink:#3c261b;--muted:#765240;--rule:#c58b5f;--accent:#8f251e}
html[data-tone="acid-yellow"]{--paper:#ded34f;--ink:#292714;--muted:#666126;--rule:#b8ad3f;--accent:#7f2f25}
html[data-tone] body.landing{background:var(--paper);color:var(--ink)}
.seven > * + *::before{color:inherit}
html[data-tone] .seven a:hover,html[data-tone] .seven a:focus-visible{background:var(--ink);color:var(--paper)}
.paper-control{margin-top:32px;font:11px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.045em}
.paper-control button{appearance:none;cursor:inherit;border:0;padding:6px 0;background:transparent;color:inherit;font:inherit;cursor:pointer}
.paper-control button[aria-pressed="true"]{text-decoration:underline;text-underline-offset:4px}
.paper-control button:focus-visible{outline:1px dotted currentColor;outline-offset:4px}

.landing-paper{position:fixed;right:max(24px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));margin:0;font-size:10px;color:inherit}
.landing-paper button{min-height:32px;padding:8px 4px}

/* Quiet paper swatches */
.landing-paper{left:50%;right:auto;transform:translateX(-50%);display:flex;gap:10px;align-items:center}
.landing-paper button{position:relative;width:14px;height:14px;min-height:0;padding:0;border:1px solid rgba(32,33,30,.4);text-decoration:none}
.landing-paper button::before{content:"";position:absolute;inset:-8px}
.landing-paper button[data-paper-tone="tan"]{background:#d7c4a4}
.landing-paper button[data-paper-tone="brown"]{background:#725847}
.landing-paper button[data-paper-tone="white"]{background:#f7f7f3}
.landing-paper button[data-paper-tone="gray"]{background:#b9b9b4}
.landing-paper button[data-paper-tone="purple"]{background:#75687f}
.landing-paper button[data-paper-tone="sienna"]{background:#a65336}
.landing-paper button[data-paper-tone="umber"]{background:#68493a}
.landing-paper button[data-paper-tone="mustard"]{background:#d9b23f}
.landing-paper button[data-paper-tone="marigold"]{background:#e2a52f}
.landing-paper button[data-paper-tone="pulp-orange"]{background:#d97833}
.landing-paper button[data-paper-tone="peach"]{background:#e8b07b}
.landing-paper button[data-paper-tone="acid-yellow"]{background:#ded34f}
.landing-paper button[aria-pressed="true"]{outline:1px solid currentColor;outline-offset:3px}

/* Understated, slightly raised swatches */
.landing-paper{bottom:max(48px,env(safe-area-inset-bottom));gap:8px}
.landing-paper button{width:14px;height:14px;border:1px solid rgba(32,33,30,.25);outline:none}
.landing-paper button[aria-pressed="true"]{outline:none}
.landing-paper button:focus-visible{outline:1px dotted currentColor;outline-offset:3px}

/* Internal pages use the homepage's restrained system typography. */
body:not(.landing){font-family:var(--mono);font-size:13px;line-height:1.5}
body:not(.landing) .brand{font-family:var(--mono);font-size:13px;line-height:1.4;letter-spacing:.02em;text-transform:uppercase}
body:not(.landing) .section-title{font-family:var(--mono);font-size:13px;line-height:1.4;letter-spacing:.02em;font-weight:400;text-transform:uppercase}
body:not(.landing) .section-title em{font-style:normal}
body:not(.landing) .section-note,
body:not(.landing) .info-copy,
body:not(.landing) .info-small{font-family:var(--mono);font-size:13px;line-height:1.5;letter-spacing:normal}




/* Contact page: keep the nav quiet; let the actual email be the only live signal. */
.info-links a.email-live{
  color:var(--accent);
  animation:contactPulse 1.8s ease-in-out infinite;
}
@keyframes contactPulse{
  0%,100%{opacity:1}
  50%{opacity:.38}
}
@media (prefers-reduced-motion:reduce){
  .info-links a.email-live{animation:none}
}