/* Art by Stelian — shared styles for every page except books.html, which
   keeps its own Caladea system to match the printed interiors.

   One dark ground across the site. Each section carries the accent of what
   is in it: orange for wood, blue for airplants and metal, gold for books.
   Photographs are shot on black cloth so they sit on this ground without a
   bright rectangle around them. */

:root{
  --deep:#06090C;        /* the room */
  --ground:#0A0F14;      /* bands, cards, header */
  --raised:#111A22;
  --cream:#F0EADC;
  --muted:#A2ADB5;
  --dim:#6B7984;
  --orange:#C97434;      /* the wood */
  --ember:#E3913F;       /* the hot centre of the light */
  --blue:#4C86A3;        /* airplants, metal */
  --gold:#CBBA8C;        /* the books */
  --vermilion:#B4483C;
  --line:rgba(240,234,220,.13);

  /* older names used in index.html */
  --room:var(--deep);
  --warm:var(--orange);
  --cool:var(--blue);

  --display:"Fraunces","Hoefler Text",Georgia,serif;
  --ui:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;

  --accent:var(--orange);
  color-scheme:dark;
}
body[data-room=air]{--accent:var(--blue)}
body[data-room=plain]{--accent:var(--gold)}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{background:var(--deep);color:var(--cream);font-family:var(--ui);
  font-size:17px;line-height:1.65;margin:0;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;
  padding-left:max(16px,env(safe-area-inset-left,0px));
  padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:400;margin:0;line-height:1.08;
  text-wrap:balance;font-variation-settings:"SOFT" 28,"WONK" 1}
p{margin:0}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{
  outline:2px solid var(--ember);outline-offset:3px}
.kicker{font-size:.73rem;letter-spacing:.24em;text-transform:uppercase;color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ----------------------------------------------------------------- nav */
header.site{position:sticky;top:0;z-index:20;
  background:rgba(6,9,12,.88);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;padding-block:.85rem}
.brand{display:flex;align-items:center;gap:.65rem;margin-right:auto}
.brand{gap:.8rem}
.brand img{width:46px;height:46px;display:block}
.brand span{font-family:"Michroma",var(--ui);font-size:1.18rem;letter-spacing:.04em;line-height:1.1;white-space:nowrap}
@media (max-width:420px){.brand img{width:40px;height:40px}.brand span{font-size:1rem}}
nav{display:flex;gap:1.1rem;flex-wrap:wrap}
nav a{font-size:.78rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  padding-bottom:3px;border-bottom:2px solid transparent;transition:color .18s,border-color .18s}
nav a:hover,nav a[aria-current=page]{color:var(--cream)}
nav a[data-c=wood]:hover,nav a[data-c=wood][aria-current=page]{border-color:var(--orange)}
nav a[data-c=air]:hover,nav a[data-c=air][aria-current=page]{border-color:var(--blue)}
nav a[data-c=book]:hover,nav a[data-c=book][aria-current=page]{border-color:var(--gold)}
nav a:not([data-c])[aria-current=page]{border-color:var(--gold)}

/* ----------------------------------------------------------- page head */
.pagehead{background:var(--ground);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.pagehead::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(55% 90% at 85% 20%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 70%)}
.pagehead .wrap{position:relative;padding-block:clamp(44px,7vw,88px)}
.pagehead h1{font-size:clamp(2.2rem,5.6vw,3.9rem);margin-top:.6rem;letter-spacing:-.01em}
.pagehead .lede{color:var(--muted);max-width:54ch;margin-top:1.2rem;font-size:1.06rem}

.band{border-top:1px solid var(--line)}
.band .wrap{padding-block:clamp(48px,7vw,92px)}

/* ---------------------------------------------------------- the pieces */
.pieces{display:grid;align-items:start;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(14px,2.2vw,26px)}
.piece{margin:0;position:relative;background:var(--ground);border:1px solid var(--line);
  overflow:hidden;display:flex;flex-direction:column;transition:border-color .25s}
.piece:hover{border-color:color-mix(in srgb,var(--pc,var(--accent)) 55%,transparent)}
.piece[data-c=wood]{--pc:var(--orange)}
.piece[data-c=paint]{--pc:var(--gold)}
/* a painting is never cropped */
.piece[data-c=paint] .frame img{max-height:none;object-fit:contain}
.piece[data-c=air]{--pc:var(--blue)}
.piece .frame{position:relative;background:var(--deep);display:block;
  border:0;padding:0;width:100%;cursor:zoom-in;color:inherit}
/* photos keep their own shape; an empty frame holds a 4:3 space */
.piece .frame img{width:100%;height:auto;max-height:min(520px,70vh);object-fit:cover;display:block}
.piece .frame.empty{aspect-ratio:4/3;cursor:default;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 55% at 50% 42%,color-mix(in srgb,var(--pc,var(--accent)) 14%,transparent),transparent 72%),#05080A}
.piece .frame.empty span{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);border:1px dashed rgba(240,234,220,.18);padding:.5rem .8rem}
.piece figcaption{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.3rem;flex:1}
.piece h3{font-size:1.2rem;font-variation-settings:"SOFT" 40,"WONK" 1}
.piece .facts{font-size:.76rem;letter-spacing:.06em;color:var(--dim)}
.piece .note{font-size:.9rem;color:var(--muted);line-height:1.5}
.piece .ask{margin-top:auto;padding-top:.6rem;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--pc,var(--accent))}
.piece .ask:hover{color:var(--cream)}
.piece .price{font-variant-numeric:tabular-nums;color:var(--cream)}
.w12{grid-column:span 12}.w8{grid-column:span 8}.w7{grid-column:span 7}
.w6{grid-column:span 6}.w5{grid-column:span 5}.w4{grid-column:span 4}
@media (max-width:760px){.pieces>*{grid-column:span 12}}

.gallery-note{color:var(--dim);font-size:.88rem;margin-top:clamp(28px,4vw,40px);max-width:60ch}

/* ------------------------------------------------------- log to bowl */
.process{background:var(--ground)}
.process h2{font-size:clamp(1.5rem,3vw,2.1rem);margin-top:.5rem}
.story+.story{margin-top:clamp(40px,6vw,64px);padding-top:clamp(32px,5vw,52px);border-top:1px solid var(--line)}
.steps{list-style:none;margin:clamp(24px,4vw,40px) 0 0;padding:0;display:grid;
  grid-template-columns:repeat(var(--n,5),minmax(0,1fr));gap:clamp(10px,1.6vw,18px);max-width:calc(var(--n,5) * 240px)}
.steps li{display:flex;flex-direction:column;gap:.6rem}
.steps .frame{aspect-ratio:1;border:1px solid var(--line);padding:0;background:var(--deep);cursor:zoom-in}
.steps .frame img{width:100%;height:100%;object-fit:cover;display:block}
.steps span{font-size:.82rem;color:var(--muted);line-height:1.4}
.steps b{color:var(--accent);font-weight:500;margin-right:.3rem}
.process .gallery-note a{border-bottom:1px solid var(--line)}
.process .gallery-note a:hover{border-color:var(--accent)}
@media (max-width:760px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}.steps li:last-child{grid-column:span 2}}

/* ------------------------------------------------------------ lightbox */
dialog.lb{border:0;padding:0;background:transparent;max-width:none;max-height:none;
  width:100vw;height:100vh;margin:0;color:var(--cream)}
dialog.lb::backdrop{background:rgba(0,0,0,.94)}
dialog.lb figure{margin:0;height:100%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:.8rem;padding:56px 16px 16px}
dialog.lb img{max-width:100%;max-height:calc(100vh - 110px);object-fit:contain}
dialog.lb figcaption{color:var(--muted);font-size:.85rem;white-space:pre}
dialog.lb button{position:absolute;background:rgba(6,9,12,.7);border:1px solid var(--line);
  color:var(--cream);font:inherit;cursor:pointer;z-index:2}
dialog.lb .x{top:12px;right:12px;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.5rem .8rem}
dialog.lb .nav{top:50%;transform:translateY(-50%);width:48px;height:64px;font-size:2rem;line-height:1}
dialog.lb .prev{left:12px}
dialog.lb .next{right:12px}
dialog.lb .nav:hover,dialog.lb .x:hover{border-color:var(--accent)}
dialog.lb.single .nav{display:none}
.piece .frame .count{position:absolute;right:10px;bottom:10px;font-size:.66rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cream);background:rgba(6,9,12,.72);border:1px solid var(--line);
  padding:.3rem .55rem;pointer-events:none}

/* --------------------------------------------------------------- prose */
.prose{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:clamp(24px,5vw,64px)}
.prose .side img{width:100%;height:auto;display:block}
.prose .body p{color:var(--muted);max-width:60ch;margin-top:1.1rem;font-size:1.04rem}
.prose .body p:first-child{margin-top:0}
.prose .body strong{color:var(--cream);font-weight:500}
@media (max-width:640px){.prose{grid-template-columns:minmax(0,1fr)}.prose .side img{max-width:280px}}
.creed{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:2rem}
.creed span{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:.42rem .8rem;border-radius:100px}

/* ---------------------------------------------------------------- form */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(28px,5vw,72px)}
@media (max-width:760px){.contact{grid-template-columns:minmax(0,1fr)}}
.contact.solo{grid-template-columns:minmax(0,1fr);max-width:720px;margin-inline:auto}
.ways dl{margin:0}
.ways dt{font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);margin-top:1.5rem}
.ways dt:first-child{margin-top:0}
.ways dd{margin:.3rem 0 0;font-size:1.05rem}
.ways dd a{border-bottom:1px solid var(--line)}
.ways dd a:hover{border-color:var(--accent)}
.ways dd small{display:block;color:var(--muted);font-size:.9rem}
form.msg{display:grid;gap:1rem}
form.msg label{display:grid;gap:.35rem;font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
form.msg input,form.msg textarea{background:var(--deep);color:var(--cream);
  border:1px solid var(--line);padding:.75rem .9rem;font:inherit;font-size:1rem;
  letter-spacing:normal;text-transform:none;border-radius:2px;width:100%}
form.msg textarea{min-height:9.5rem;resize:vertical}
form.msg .two{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
form.msg button{justify-self:start;background:var(--accent);color:#0A0F14;border:0;
  padding:.8rem 1.5rem;font-family:var(--ui);font-size:.76rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;cursor:pointer;border-radius:2px}
form.msg button:hover{filter:brightness(1.12)}
form.msg button[disabled]{opacity:.6;cursor:wait}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#status{min-height:1.5em;color:var(--accent)}

/* ------------------------------------------------------------- footer */
footer{border-top:1px solid var(--line);background:var(--ground)}
footer .wrap{padding-block:clamp(32px,4vw,56px);display:grid;gap:1.2rem;
  grid-template-columns:1fr auto 1fr;align-items:center}
footer .wrap>p:first-child{justify-self:start}
footer .wrap>p:last-child{justify-self:end;text-align:right}
/* Stelian emblem centered in the footer, tinted with the footer text color (same as gnti.com) */
footer a.emblem{display:block;width:44px;height:44px;border:0;color:var(--dim);background-color:currentColor;
  -webkit-mask:url("images/stelian-emblem.png") center/contain no-repeat;mask:url("images/stelian-emblem.png") center/contain no-repeat;
  transition:color .2s}
footer a.emblem:hover{color:var(--cream)}
@media (max-width:40rem){
  footer .wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  footer .wrap>p:first-child,footer .wrap>p:last-child{justify-self:center;text-align:center}
  footer a.emblem{order:-1}
}
footer a{border-bottom:1px solid var(--line)}
footer a:hover{color:var(--cream);border-color:var(--accent)}
footer p{font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);line-height:2}

@media (prefers-reduced-motion:reduce){*{transition:none!important}}