/* Ardelia
   Layout: a catalogue raisonné. A narrow margin column carries the apparatus (gallery number,
   section name); the body column carries text at reading measure, with plates and entries
   stepping out wider. The site opens with an enfilade: a suite of doorways walked by scrolling. */

@font-face{font-family:"Brygada 1918"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/brygada-1918-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brygada 1918"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(../fonts/brygada-1918-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Brygada 1918"; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(../fonts/brygada-1918-latin-wght-italic.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Brygada 1918"; font-style:italic; font-weight:400 700; font-display:swap;
  src:url(../fonts/brygada-1918-latin-ext-wght-italic.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(../fonts/newsreader-latin-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader"; font-style:normal; font-weight:200 800; font-display:swap;
  src:url(../fonts/newsreader-latin-ext-opsz-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url(../fonts/newsreader-latin-opsz-italic.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Newsreader"; font-style:italic; font-weight:200 800; font-display:swap;
  src:url(../fonts/newsreader-latin-ext-opsz-italic.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Hanken Grotesk"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url(../fonts/hanken-grotesk-latin-ext-wght-normal.woff2) format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  /* Travertine & Lapis */
  --travertine:#E6E0D3;   /* walls, page */
  --travertine-2:#DCD5C5; /* plates, floor */
  --ink:#1C2130;          /* text */
  --ink-2:#4A4E5A;        /* secondary text */
  --lapis:#23386E;        /* accent: links, numerals */
  --gilt:#A4884F;         /* metal: frames, architraves, rules of note */
  --caption:#6B665C;      /* captions, labels */
  --rule:#C9C1B0;         /* hairlines */
  --light:rgba(255,246,222,.55); /* picture-light glow */
  --error:#9A2F2A;

  --display:"Brygada 1918", "Iowan Old Style", Georgia, serif;
  --text:"Newsreader", "Iowan Old Style", Georgia, serif;
  --label:"Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

  --gutter:clamp(16px, 5vw, 72px);
  --head-h:64px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    /* Nocturne: the galleries after closing */
    --travertine:#1A1C1F; --travertine-2:#23252A; --ink:#DAD4C9; --ink-2:#ADA79C;
    --lapis:#9DB0E0; --gilt:#B39862; --caption:#8F8A80; --rule:#34363B; --light:rgba(255,230,180,.16); --error:#E3907F;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --travertine:#1A1C1F; --travertine-2:#23252A; --ink:#DAD4C9; --ink-2:#ADA79C;
  --lapis:#9DB0E0; --gilt:#B39862; --caption:#8F8A80; --rule:#34363B; --light:rgba(255,230,180,.16); --error:#E3907F;
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:var(--head-h); -webkit-text-size-adjust:100%}
body{margin:0; background:var(--travertine); color:var(--ink); font-family:var(--text); font-size:clamp(16px, .4vw + 12.5px, 18px); line-height:1.6; font-optical-sizing:auto; text-rendering:optimizeLegibility}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0}
ol,ul{padding:0; list-style:none}
a{color:var(--lapis); text-decoration-thickness:1px; text-underline-offset:.2em}
:focus-visible{outline:2px solid var(--lapis); outline-offset:3px}
em{font-style:italic}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.skip{position:absolute; left:var(--gutter); top:-60px; z-index:30; background:var(--ink); color:var(--travertine); padding:10px 14px; font-family:var(--label); font-size:14px}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}

.eyebrow{font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--caption)}
/* Marks unfinished content. Delete this rule's contents (or the spans) when the copy is final. */
.placeholder{display:inline-block; vertical-align:.15em; margin-left:.4em; padding:2px 7px 1px; border:1px dashed var(--gilt); font-family:var(--label); font-size:10.5px; font-weight:500; font-style:normal; letter-spacing:.12em; text-transform:uppercase; color:var(--gilt); line-height:1.5}

/* ---------- Header ---------- */
.site-head{position:fixed; inset:0 0 auto 0; z-index:20; height:calc(var(--head-h) + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) var(--gutter) 0; display:flex; align-items:center; justify-content:space-between; gap:24px; background:color-mix(in srgb, var(--travertine) 88%, transparent); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border-bottom:1px solid color-mix(in srgb, var(--rule) 70%, transparent)}
.wordmark{font-family:var(--display); font-weight:500; font-size:26px; letter-spacing:-.01em; color:var(--ink); text-decoration:none; line-height:1}
.galleries ol{display:flex; gap:clamp(14px, 2.2vw, 32px)}
.galleries a{display:flex; align-items:baseline; gap:.55em; font-family:var(--label); font-size:12.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); text-decoration:none; padding-block:8px; transition:color .4s}
.galleries a span{font-family:var(--display); font-size:13px; letter-spacing:.04em; color:var(--gilt)}
.galleries a:hover, .galleries a[aria-current="true"]{color:var(--ink)}
.galleries a[aria-current="true"]{box-shadow:inset 0 -1px 0 var(--ink)}
.plan-toggle{display:none}
@media (max-width:900px){
  .plan-toggle{display:block; border:1px solid var(--rule); background:transparent; color:var(--ink); font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; padding:9px 14px; cursor:pointer}
  .galleries ol{position:fixed; inset:calc(var(--head-h) + env(safe-area-inset-top,0px)) 0 auto 0; flex-direction:column; gap:0; padding:8px var(--gutter) 24px; background:var(--travertine); border-bottom:1px solid var(--rule); visibility:hidden; opacity:0; transform:translateY(-8px); transition:opacity .35s, transform .35s, visibility 0s .35s}
  .galleries.open ol{visibility:visible; opacity:1; transform:none; transition:opacity .35s, transform .35s}
  .galleries a{font-size:14px; padding-block:14px; border-bottom:1px solid var(--rule)}
  .galleries a span{min-width:2.2em}
}

/* ---------- Enfilade ---------- */
.enfilade{position:relative}
.js .enfilade{height:600vh}
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; perspective:900px; perspective-origin:50% 52%; background:color-mix(in srgb, var(--ink) 55%, var(--travertine))}
.world{position:absolute; inset:0; transform-style:preserve-3d}
.room{position:absolute; inset:0; transform-style:preserve-3d; --fog:0%}
.room[data-room="1"]{transform:translateZ(-1100px)}
.room[data-room="2"]{transform:translateZ(-2200px)}
.room[data-room="3"]{transform:translateZ(-3300px)}
.room[data-room="4"]{transform:translateZ(-4400px)}
.room[data-room="5"]{transform:translateZ(-5500px)}
.room[data-room="6"]{transform:translateZ(-6600px)}
.wall-svg{position:absolute; left:-100%; top:-100%; width:300%; height:300%; overflow:visible}
.wall{fill:color-mix(in srgb, var(--travertine), var(--ink) var(--fog))}
.floor{fill:color-mix(in srgb, color-mix(in srgb, var(--travertine-2) 88%, var(--ink)), var(--ink) var(--fog))}
.skirting{fill:color-mix(in srgb, color-mix(in srgb, var(--travertine) 80%, var(--ink)), var(--ink) var(--fog))}
.architrave{fill:none; stroke:var(--gilt); stroke-width:1.4; opacity:.9}
.frame{fill:none; stroke:var(--gilt); stroke-width:6}
:root[data-theme="dark"] .mat{fill:color-mix(in srgb, var(--travertine) 70%, #fff)}
:root[data-theme="dark"] .hung-photo{filter:brightness(.85) sepia(.1)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .mat{fill:color-mix(in srgb, var(--travertine) 70%, #fff)} :root:not([data-theme="light"]) .hung-photo{filter:brightness(.85) sepia(.1)} }
.lamp{fill:var(--gilt)}
.mat{fill:color-mix(in srgb, var(--travertine) 45%, #fff)}
.hung-photo{filter:sepia(.1) contrast(1.03)}
.light-a{stop-color:var(--light)}
.light-b{stop-color:var(--light); stop-opacity:0}

.wall-text{transition:opacity .2s linear; position:absolute; left:max(calc(var(--gutter) * 1.6), 10%); top:30%; width:min(25%, 340px); color:var(--ink)}
.wall-text .eyebrow{color:var(--lapis)}
.wall-title{font-family:var(--display); font-weight:500; font-size:clamp(24px, 2.6vw, 38px); line-height:1.05; margin:.35em 0 .5em}
.wall-note{font-size:clamp(14px, 1.1vw, 17px); line-height:1.45; color:var(--ink-2)}
.wall-text--entrance{top:28%; width:min(27%, 400px)}
.wall-text--entrance h1{font-family:var(--display); font-weight:500; font-size:clamp(30px, 3vw, 46px); line-height:1.04; letter-spacing:-.012em; margin:.45em 0 .55em; text-wrap:balance}
.wall-text--entrance h1 em{color:var(--lapis)}
.wall-text--entrance .wall-note{max-width:30ch; text-wrap:pretty}
.end-mark{position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); font-family:var(--display); font-weight:500; font-size:clamp(56px, 9vw, 140px); letter-spacing:-.015em; color:var(--ink); line-height:1}

.stage-foot{position:absolute; left:var(--gutter); right:var(--gutter); bottom:calc(18px + env(safe-area-inset-bottom,0px)); display:flex; align-items:center; gap:20px; font-family:var(--label); font-size:11.5px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); z-index:2}
.stage-foot a{color:var(--ink-2); text-decoration:none; border-bottom:1px solid var(--rule); padding-bottom:2px}
.stage-foot a:hover{color:var(--ink)}
.stage-foot{justify-content:space-between}
.crumbs{display:flex; align-items:center; gap:0; margin:0; padding:0; list-style:none}
.crumbs li{color:color-mix(in srgb, var(--ink-2) 45%, transparent); transition:color .8s ease}
.crumbs li + li::before{content:""; display:inline-block; width:clamp(10px, 1.6vw, 24px); height:1px; margin-inline:10px; vertical-align:middle; background:var(--rule); transition:background .8s ease}
.crumbs li.is-past{color:var(--ink-2)}
.crumbs li.is-past + li::before, .crumbs li.is-current::before{background:var(--gilt)}
.crumbs li.is-current{color:var(--ink)}

@media (max-width:760px){
  .wall-svg{top:calc(-100% + 5vh)}
  .wall-text, .wall-text--entrance{left:calc(var(--gutter) + 12px); right:calc(var(--gutter) + 12px); width:auto; top:calc(var(--head-h) + 5vh)}
  .wall-text--entrance h1{font-size:clamp(30px, 9vw, 40px)}
  .wall-title{font-size:26px}
  .crumbs li:not(.is-current){display:none}
  .crumbs li.is-current::before{display:none}
}
@media (max-width:760px) and (max-height:700px){ .wall-text--entrance h1{font-size:26px} }

/* No script or reduced motion: the entrance wall stands alone, like a title page. */
html:not(.js) .room:not([data-room="0"]), html:not(.js) .stage-foot{display:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .js .enfilade{height:auto}
  .stage{position:relative}
  .room:not([data-room="0"]), .crumbs{display:none}
  .stage-foot{justify-content:flex-end}
}

/* ---------- Galleries ---------- */
.gallery{display:grid; grid-template-columns:minmax(120px, 2fr) minmax(0, 9fr) minmax(0, 1fr); column-gap:clamp(24px, 4vw, 64px); padding:clamp(56px, 6vw, 92px) var(--gutter) clamp(40px, 4.5vw, 64px); position:relative; border-top:1px solid var(--rule)}
.gallery:first-of-type{border-top:0}
/* the picture light: a soft glow that comes up as a gallery is entered (decorative only) */
.gallery::before{content:""; position:absolute; left:50%; top:0; width:min(900px, 90vw); height:420px; transform:translateX(-50%); background:radial-gradient(ellipse at 50% 0%, var(--light), transparent 70%); opacity:0; transition:opacity 2.4s ease; pointer-events:none}
.gallery.lit::before{opacity:1}
.margin{position:sticky; top:calc(var(--head-h) + 40px); align-self:start; display:grid; gap:6px; padding-top:10px}
.margin .eyebrow{color:var(--lapis)}
.body{display:grid; gap:clamp(32px, 3.4vw, 48px); min-width:0}
.display{font-family:var(--display); font-weight:500; font-size:clamp(28px, 2.7vw, 40px); line-height:1.12; letter-spacing:-.008em; text-wrap:balance; max-width:22ch}
.prose{display:grid; gap:1.1em; max-width:62ch}
.lede{font-size:1.1em; line-height:1.55; color:var(--ink)}
.prose p:not(.lede){color:var(--ink-2)}
.section-note{color:var(--ink-2); max-width:62ch; margin-top:calc(-1 * clamp(16px, 2vw, 28px))}
@media (max-width:760px){
  .gallery{grid-template-columns:minmax(0,1fr)}
  .margin{position:static; display:flex; gap:12px; align-items:baseline; margin-bottom:24px; padding-top:0}
}

/* Plates */
.plate{display:grid; gap:12px}
.plate-image{aspect-ratio:16/9; max-width:100%; background:
  repeating-linear-gradient(118deg, color-mix(in srgb, var(--ink) 7%, transparent) 0 1px, transparent 1px 7px),
  linear-gradient(170deg, color-mix(in srgb, var(--ink) 22%, var(--travertine-2)), color-mix(in srgb, var(--ink) 58%, var(--travertine-2)));
  box-shadow:0 0 0 1px var(--rule)}
.plate figcaption{font-style:italic; font-size:15.5px; color:var(--caption); max-width:70ch}
.plate-no{font-family:var(--label); font-style:normal; font-size:11px; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--lapis); margin-right:.8em}

/* Catalogue entry with provenance chain */
.entry{display:grid; gap:clamp(24px, 3vw, 36px); padding-block:clamp(28px, 3vw, 40px); border-block:1px solid var(--rule)}
.entry-head{display:grid; gap:8px; max-width:62ch}
.entry-title{font-family:var(--display); font-style:italic; font-size:clamp(24px, 2.2vw, 30px); line-height:1.2}
.entry-note{font-size:15px; color:var(--caption)}
.entry-body{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(28px, 4vw, 56px); align-items:start}
@media (max-width:760px){ .entry-body{grid-template-columns:1fr} }

/* The verso: the back of the canvas, where owners leave their marks */
.verso{display:grid; gap:10px}
.verso figcaption{font-style:italic; font-size:14.5px; color:var(--caption)}
.canvas{position:relative; aspect-ratio:4/5; max-width:100%; overflow:hidden;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--ink) 6%, transparent) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 5%, transparent) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 70% 78%, rgba(120,90,50,.18), transparent 22%),
    radial-gradient(circle at 30% 20%, rgba(120,90,50,.12), transparent 18%),
    radial-gradient(ellipse at 40% 35%, #D2C19F, #AE9A74 80%);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 18%, transparent), 0 20px 40px -26px color-mix(in srgb, var(--ink) 60%, transparent)}
/* Stretcher bars: old, darkened wood with worn edges */
.bar{position:absolute; pointer-events:none; background-color:#4E3826;
  box-shadow:inset 0 0 0 1px rgba(20,12,6,.45), inset 0 0 14px rgba(15,8,3,.45)}
.bar-top, .bar-bottom{left:0; right:0; height:7%;
  background-image:
    radial-gradient(ellipse 18% 70% at 72% 40%, rgba(20,12,6,.35), transparent 70%),
    radial-gradient(ellipse 10% 60% at 24% 60%, rgba(150,120,85,.18), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255,235,200,.05) 0 1px, transparent 1px 4px, rgba(0,0,0,.08) 4px 5px, transparent 5px 9px)}
.bar-top{top:0} .bar-bottom{bottom:0}
.bar-left, .bar-right{top:0; bottom:0; width:9%;
  background-image:
    radial-gradient(ellipse 70% 14% at 40% 63%, rgba(20,12,6,.35), transparent 70%),
    radial-gradient(ellipse 60% 9% at 55% 22%, rgba(150,120,85,.16), transparent 70%),
    repeating-linear-gradient(90deg, rgba(255,235,200,.05) 0 1px, transparent 1px 4px, rgba(0,0,0,.08) 4px 5px, transparent 5px 9px)}
.bar-left{left:0} .bar-right{right:0}
/* Hanging wire, strung between two screw eyes on the side bars */
.wire{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.wire-shadow{fill:none; stroke:rgba(40,28,15,.35); stroke-width:3}
.wire-line{fill:none; stroke:#B9BEC3; stroke-width:2.2; stroke-dasharray:2.5 1.2}
.screw-eye{fill:none; stroke:#9EA3A8; stroke-width:2.5}
/* Marks on the verso, drawn in SVG so ink, crayon and paper can age */
.marks{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible}
.mark{transition:opacity .5s ease, transform .5s ease; transform-box:fill-box; transform-origin:center}
.paper{fill:#EDE3C9}
.paper-edge{fill:none; stroke:rgba(110,85,50,.35); stroke-width:.8}
.print-rule{fill:none; stroke:rgba(92,60,38,.55); stroke-width:1.1}
.print-rule.thin{stroke-width:.5}
.print-caps{font-family:var(--label); font-size:7.5px; font-weight:600; letter-spacing:.32em; fill:rgba(92,60,38,.7)}
.ink-hand{font-family:var(--display); font-style:italic; font-size:17px; fill:rgba(62,40,24,.88)}
.ink-hand.small{font-size:11.5px}
.stamp-line{fill:none; stroke:rgba(74,48,112,.82); stroke-width:3}
.stamp-line.thin{stroke-width:1.4}
.stamp-text{font-family:var(--label); font-size:9.5px; font-weight:700; letter-spacing:.12em; fill:rgba(74,48,112,.85)}
.stamp-center{font-family:var(--label); font-size:13px; font-weight:700; letter-spacing:.2em; fill:rgba(74,48,112,.85)}
.stamp-date{font-family:var(--label); font-size:10px; font-weight:600; letter-spacing:.18em; fill:rgba(74,48,112,.8)}
.crayon{font-family:var(--display); font-weight:700; font-size:44px; letter-spacing:.05em; fill:rgba(28,44,92,.82)}
.crayon-stroke{fill:none; stroke:rgba(28,44,92,.7); stroke-width:3.5; stroke-linecap:round}
.lot-no{font-family:var(--display); font-weight:700; font-size:27px; fill:rgba(40,30,22,.9)}
.glue{fill:rgba(150,112,58,.22)}
.glue-edge{fill:none; stroke:rgba(120,88,45,.3); stroke-width:1; stroke-dasharray:3 2}
.remnant{fill:#E9DEC2; stroke:rgba(110,85,50,.3); stroke-width:.6}
.entry[data-step] .mark{opacity:.2}
.entry[data-step] .mark.is-lit{opacity:1; transform:scale(1.05)}

/* The chain: hovering a step draws a gilt line down to it */
.chain{position:relative; display:grid; --progress:0px}
.chain::before, .chain::after{content:""; position:absolute; left:calc(1.2em - 1px); top:.9em; width:1px; pointer-events:none}
.chain::before{bottom:1.2em; background:var(--rule)}
.chain::after{width:2px; margin-left:-.5px; height:var(--progress); background:var(--gilt); transition:height .6s cubic-bezier(.3,.7,.2,1)}
.chain li{position:relative; display:grid; grid-template-columns:2.4em minmax(0,1fr); gap:14px; padding-block:18px; cursor:default; outline-offset:6px; transition:opacity .45s ease}
.chain li:first-child{padding-top:0}
.chain-no{position:relative; z-index:1; justify-self:center; width:1.6em; height:1.6em; display:grid; place-items:center; border-radius:50%; background:var(--travertine); box-shadow:0 0 0 1px var(--rule); font-family:var(--display); font-size:17px; line-height:1; color:var(--gilt); font-variant-numeric:lining-nums; transition:background .45s, color .45s, box-shadow .45s}
.chain li p:first-child{transition:color .45s}
.source{font-family:var(--label); font-size:12.5px; letter-spacing:.02em; color:var(--caption); margin-top:4px}
.chain-gap p:first-child{font-style:italic; color:var(--ink-2)}
.chain-gap .chain-no{color:var(--caption); box-shadow:0 0 0 1px var(--rule), 0 0 0 4px var(--travertine), 0 0 0 5px color-mix(in srgb, var(--rule) 60%, transparent)}
.entry[data-step] .chain li{opacity:.4}
.entry[data-step] .chain li.is-past, .entry[data-step] .chain li.is-current{opacity:1}
.chain li.is-past .chain-no{box-shadow:0 0 0 1px var(--gilt)}
.chain li.is-current .chain-no{background:var(--gilt); color:var(--travertine); box-shadow:0 0 0 1px var(--gilt)}
.chain li.is-current p:first-child{color:var(--ink)}
@media (max-width:760px){ .entry{grid-template-columns:1fr} }

/* Coverage */
.coverage{display:grid; gap:20px}
.figures{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:clamp(20px, 4vw, 56px)}
.figure{border-top:1px solid var(--ink); padding-top:16px; display:grid; gap:8px}
.fig{color:var(--lapis); font-family:var(--display); font-weight:400; font-size:clamp(34px, 3.4vw, 52px); line-height:1; letter-spacing:-.015em; font-variant-numeric:lining-nums tabular-nums}
.fig-label{font-size:15px; line-height:1.45; color:var(--ink-2); max-width:32ch; margin-top:4px}
.coverage-note{font-size:15.5px; color:var(--caption); max-width:62ch}
@media (max-width:560px){ .figures{grid-template-columns:1fr} }

.served{display:grid; gap:14px}
.served ul{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); border-top:1px solid var(--ink)}
.served li{font-family:var(--text); font-style:italic; font-size:15.5px; color:var(--ink-2); line-height:1.25; padding:14px 16px 0 0; text-wrap:balance}
.served li + li{padding-left:16px; border-left:1px solid var(--rule)}
@media (max-width:760px){ .served ul{grid-template-columns:1fr 1fr} .served li{padding:12px 12px 10px 0; border-bottom:1px solid var(--rule)} .served li + li{border-left:0; padding-left:0} .served li:nth-child(even){padding-left:14px; border-left:1px solid var(--rule)} }

/* Launch */
.opening{display:grid; gap:8px; align-content:end}
.opening-date{font-family:var(--display); font-weight:500; font-size:clamp(30px, 3.2vw, 46px); line-height:1.05; letter-spacing:-.01em}
.opening-count{font-family:var(--label); font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--lapis)}
.opening-count:empty{display:none}
.enquiries{font-family:var(--label); font-size:14px; letter-spacing:.04em}

/* Mission & Vision */
.inscriptions{display:grid; gap:clamp(32px, 4vw, 56px); overflow-x:clip; overflow-clip-margin:12px}
.inscription{display:grid; gap:14px}
.inscribed{font-family:var(--display); font-weight:400; font-size:clamp(22px, 2.2vw, 32px); line-height:1.28; letter-spacing:-.004em; max-width:30ch; text-wrap:balance}
.inscription:nth-child(2){justify-self:end; text-align:left}
.ambitions{display:grid; gap:20px}
.ambitions dl{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:0 clamp(24px, 4vw, 56px)}
.ambitions dl > div{padding-block:20px 22px; border-top:1px solid var(--rule); display:grid; gap:6px}
.ambitions dt{font-family:var(--display); font-size:21px; line-height:1.25}
.ambitions dd{color:var(--ink-2); font-size:16.5px}
@media (max-width:760px){ .ambitions dl{grid-template-columns:1fr} .inscription:nth-child(2){justify-self:start} }

/* Publicity */
.literature{display:grid}
.literature li{display:grid; grid-template-columns:5em minmax(0,1fr); gap:clamp(12px, 3vw, 40px); padding-block:20px 22px; border-top:1px solid var(--rule)}
.literature li:last-child{border-bottom:1px solid var(--rule)}
.lit-date{font-family:var(--label); font-size:13px; letter-spacing:.08em; color:var(--gilt); padding-top:4px; font-variant-numeric:tabular-nums}
.lit-cite{font-size:1.05em}
.lit-cite cite{font-style:italic}
.lit-quote{font-family:var(--display); font-style:italic; color:var(--ink-2); margin-top:8px; font-size:1.05em}
.lit-quote::before{content:"“"} .lit-quote::after{content:"”"}

/* Team */
.team{display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:clamp(32px, 3vw, 44px) clamp(22px, 2.4vw, 32px)}
.team li{display:grid; gap:6px; align-content:start}
.portrait{aspect-ratio:4/5; max-width:100%; display:grid; place-items:center; margin-bottom:10px; background:radial-gradient(ellipse at 50% -10%, var(--light), transparent 60%), color-mix(in srgb, var(--ink) 8%, var(--travertine-2)); border:6px solid color-mix(in srgb, var(--travertine) 60%, #fff); box-shadow:0 0 0 1px var(--gilt)}
:root[data-theme="dark"] .portrait{border-color:var(--travertine-2)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .portrait{border-color:var(--travertine-2)} }
.portrait span{font-family:var(--display); font-size:clamp(34px, 3.4vw, 52px); color:color-mix(in srgb, var(--ink) 30%, transparent)}
.person{font-family:var(--display); font-size:21px; line-height:1.2}
.role{font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--caption)}

/* ---------- Footer ---------- */
.site-foot{padding:clamp(48px, 6vw, 88px) var(--gutter) calc(40px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--rule); display:grid; gap:40px}
.foot-mark{font-family:var(--display); font-weight:500; font-size:clamp(56px, 9vw, 140px); line-height:.9; letter-spacing:-.025em; color:var(--ink)}
.foot-cols{display:grid; grid-template-columns:1fr 1.4fr 2fr; gap:24px; font-family:var(--label); font-size:13px; letter-spacing:.03em; color:var(--caption); border-top:1px solid var(--rule); padding-top:20px}
.colophon{font-family:var(--text); font-style:italic; font-size:15px; letter-spacing:0}
@media (max-width:760px){ .foot-cols{grid-template-columns:1fr} }
.defs{position:absolute; width:0; height:0; overflow:hidden}

/* ---------- Register ---------- */
.site-head > .theme-toggle{margin-left:auto}
.head-register{font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--travertine); background:var(--lapis); text-decoration:none; padding:10px 16px; transition:background .3s}
.head-register:hover{background:var(--ink)}
@media (max-width:900px){ .site-head{gap:10px} .head-register{padding:10px 14px; font-size:12px} }
@media (max-width:380px){ .wordmark{font-size:22px} .plan-toggle, .head-register{padding-inline:10px; letter-spacing:.08em} }

.register{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,6fr); gap:clamp(28px, 5vw, 72px); padding:clamp(28px, 4vw, 48px); background:var(--travertine-2); box-shadow:inset 0 0 0 1px var(--rule), inset 0 3px 0 var(--lapis); scroll-margin-top:calc(var(--head-h) + 24px)}
.register-head{display:grid; gap:12px; align-content:start}
.register-head .eyebrow{color:var(--lapis)}
.register-title{font-family:var(--display); font-weight:500; font-size:clamp(28px, 3vw, 42px); line-height:1.08; letter-spacing:-.01em; text-wrap:balance}
.register-note{color:var(--ink-2); font-size:16.5px; max-width:36ch}
.register-form{display:grid; gap:22px; align-content:start}
.field{display:grid; gap:4px}
.field label{font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--caption)}
.optional{text-transform:none; letter-spacing:.02em}
.field input{font:inherit; font-size:clamp(19px, 1.5vw, 22px); color:var(--ink); background:transparent; border:0; border-bottom:1px solid var(--ink-2); border-radius:0; padding:8px 0 10px; width:100%; min-width:0}
.field input::placeholder{color:var(--caption); opacity:.7}
.field input:focus{outline:none; border-bottom:2px solid var(--lapis); padding-bottom:9px}
.field input[aria-invalid="true"]{border-bottom-color:var(--error)}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}
.register-actions{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.register-actions button{font-family:var(--label); font-size:13px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--travertine); background:var(--lapis); border:0; padding:15px 28px; cursor:pointer; transition:background .3s}
.register-actions button:hover{background:var(--ink)}
.register-actions button:disabled{opacity:.6; cursor:progress}
.register-status{flex:1; min-width:12em; font-size:16px; color:var(--ink-2)}
.register-status[data-state="error"]{color:var(--error)}
.register-status[data-state="done"]{font-family:var(--display); font-style:italic; font-size:19px; color:var(--lapis)}
.consent{font-size:13px; font-style:italic; line-height:1.5; color:var(--caption); max-width:52ch}
@media (max-width:760px){ .register{grid-template-columns:1fr} }

/* ---------- Privacy notice ---------- */
.legal{padding-top:calc(var(--head-h) + clamp(56px, 8vw, 112px)); min-height:100vh}
.legal-head{display:grid; gap:18px; max-width:62ch}
.legal-meta{font-family:var(--label); font-size:13px; letter-spacing:.04em; color:var(--caption)}
.legal-toc ol{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px, 1fr)); gap:0 32px; border-top:1px solid var(--rule)}
.legal-toc li{border-bottom:1px solid var(--rule)}
.legal-toc a{display:block; padding-block:12px; font-family:var(--label); font-size:13px; font-weight:500; letter-spacing:.06em; color:var(--ink-2); text-decoration:none}
.legal-toc a:hover{color:var(--lapis)}
.legal-text{display:grid; gap:clamp(40px, 5vw, 64px); max-width:66ch}
.legal-text section{display:grid; gap:14px; scroll-margin-top:calc(var(--head-h) + 24px)}
.legal-text h2{font-family:var(--display); font-weight:500; font-size:clamp(24px, 2.4vw, 32px); line-height:1.15}
.legal-text h3{font-family:var(--label); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--caption); margin-top:8px}
.legal-text p, .legal-text li, .legal-text dd{color:var(--ink-2)}
.legal-text ul{display:grid; gap:8px; padding-left:1.2em; list-style:none}
.legal-text ul li{position:relative}
.legal-text ul li::before{content:""; position:absolute; left:-1.1em; top:.72em; width:.45em; height:1px; background:var(--gilt)}
.legal-text strong{font-weight:600; color:var(--ink)}
.basis{display:grid}
.basis > div{display:grid; gap:6px; padding-block:16px; border-top:1px solid var(--rule)}
.basis > div:last-child{border-bottom:1px solid var(--rule)}
.basis dt{font-family:var(--display); font-size:20px; color:var(--ink)}
.site-foot--short{padding-top:40px}
.consent a{color:inherit}

/* Plate I: a photograph across the full body column, captioned beneath like a catalogue plate */
.plate--photo{gap:16px}
.plate--photo img{display:block; width:100%; height:auto; max-width:100%; border:10px solid color-mix(in srgb, var(--travertine) 55%, #fff); box-shadow:0 0 0 1px var(--rule), 0 24px 48px -28px color-mix(in srgb, var(--ink) 60%, transparent); filter:sepia(.08) contrast(1.02)}
.plate--photo figcaption{max-width:none; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:baseline; gap:4px 24px}
.credit{font-style:normal; font-family:var(--label); font-size:12px; letter-spacing:.04em}
:root[data-theme="dark"] .plate--photo img{border-color:var(--travertine-2); filter:brightness(.92)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .plate--photo img{border-color:var(--travertine-2); filter:brightness(.92)} }
@media (max-width:760px){ .plate--photo img{border-width:6px} }

/* ---------- Quick sign-up (Gallery II) ---------- */
.quick-form{display:grid; gap:10px; max-width:560px}
.quick-row{display:flex; border-bottom:1px solid var(--ink-2)}
.quick-row:focus-within{border-bottom-color:var(--lapis); box-shadow:0 1px 0 var(--lapis)}
.quick-row input{flex:1; min-width:0; font:inherit; font-size:clamp(18px, 1.4vw, 20px); color:var(--ink); background:transparent; border:0; padding:12px 0}
.quick-row input::placeholder{color:var(--caption); opacity:.8}
.quick-row input:focus{outline:none}
.quick-row input[aria-invalid="true"]{color:var(--error)}
.quick-row{align-items:center; gap:16px}
.quick-row button{flex:none; align-self:center; font-family:var(--label); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lapis); background:transparent; border:1px solid var(--lapis); padding:8px 14px; margin-block:6px; cursor:pointer; transition:color .3s, background-color .3s, border-color .3s}
.quick-row button::after{content:" →"; letter-spacing:0}
.quick-row button:hover{color:var(--travertine); background:var(--lapis)}
.quick-row button:disabled{opacity:.6; cursor:progress}
.quick-form .register-status{font-size:15px; min-height:1.4em}
.quick-form .register-status:empty{min-height:0}

/* ---------- Full register (before the footer) ---------- */
@media (min-width:1100px){ .team{grid-template-columns:repeat(5, minmax(0,1fr))} }

/* Mission and Vision travel in from opposite sides as the reader scrolls (driven by script) */
#mission{overflow-x:clip}
.inscription{will-change:transform, opacity}

/* The namesake: Rose Valland and Ardelia Hall */
.namesake{display:grid; gap:18px; padding-top:clamp(28px, 4vw, 48px); border-top:1px solid var(--rule); max-width:62ch}
.namesake blockquote{margin:0; display:grid; gap:12px}
.namesake blockquote p{font-family:var(--display); font-style:italic; font-size:clamp(20px, 1.9vw, 27px); line-height:1.3; color:var(--ink); text-wrap:balance}
.namesake footer{font-family:var(--label); font-size:12px; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--lapis)}
.namesake-note{color:var(--ink-2); font-size:16.5px}
.affil{font-size:14px; line-height:1.4; color:var(--ink-2)}
.portrait span{letter-spacing:.04em}
.lit-cite a{color:inherit; text-decoration-color:var(--gilt); text-underline-offset:.22em}
.lit-cite a:hover{color:var(--lapis)}

/* ---------- Team biographies ---------- */
button.portrait{font:inherit; color:inherit; padding:0; width:100%; cursor:zoom-in; transition:box-shadow .35s, transform .5s cubic-bezier(.2,.7,.2,1)}
button.portrait:hover{box-shadow:0 0 0 1px var(--gilt), 0 18px 34px -22px color-mix(in srgb, var(--ink) 70%, transparent); transform:translateY(-3px)}
button.portrait:focus-visible{outline:2px solid var(--lapis); outline-offset:4px}

.bio-dialog{border:0; padding:0; background:transparent; color:var(--ink); max-width:min(1040px, calc(100vw - 32px)); width:100%; max-height:calc(100dvh - 32px); overflow:visible}
.bio-dialog::backdrop{background:color-mix(in srgb, color-mix(in srgb, var(--ink) 38%, var(--travertine)) 82%, transparent); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.bio-card{position:relative; box-shadow:0 40px 90px -40px rgba(10,12,20,.55); display:grid; grid-template-columns:minmax(0, 4fr) minmax(0, 7fr); gap:clamp(24px, 3.5vw, 48px); padding:clamp(22px, 3vw, 40px); align-items:start; max-height:calc(100dvh - 32px); overflow-y:auto}
.bio-sheet{position:absolute; inset:0; background:var(--travertine); box-shadow:inset 0 0 0 1px var(--rule), inset 0 3px 0 var(--gilt); z-index:0}
.bio-card > :not(.bio-sheet){position:relative; z-index:1}
.bio-portrait{margin:0; position:sticky; top:0; max-height:calc(100dvh - 112px); aspect-ratio:4/5; width:auto; max-width:100%}
.bio-portrait span{font-size:clamp(56px, 7vw, 104px)}
.bio-text{display:grid; gap:8px; align-content:start; padding-top:clamp(0px, 1.2vw, 14px)}
.bio-text .eyebrow{color:var(--lapis)}
.bio-name{font-family:var(--display); font-weight:500; font-size:clamp(28px, 3vw, 40px); line-height:1.08; letter-spacing:-.01em}
.bio-text .affil{font-size:15.5px}
.bio-body{display:grid; gap:.85em; margin-top:6px; padding-top:14px; border-top:1px solid var(--rule); font-size:16px; line-height:1.55; color:var(--ink-2)}
.bio-body p{max-width:62ch}
.bio-more{font-family:var(--label); font-size:13px; letter-spacing:.03em}
.bio-more a{color:var(--lapis)}
.bio-nav{display:flex; justify-content:space-between; gap:16px; margin-top:12px; padding-top:10px; border-top:1px solid var(--rule)}
.bio-nav button, .bio-close{font-family:var(--label); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); background:transparent; border:0; padding:8px 0; cursor:pointer}
.bio-nav button:hover, .bio-close:hover{color:var(--lapis)}
.bio-card > .bio-close{position:absolute; top:clamp(12px, 2vw, 22px); right:clamp(16px, 3vw, 32px)}
@media (max-width:760px){
  .bio-card{grid-template-columns:1fr; gap:20px; padding:56px 20px 24px}
  .bio-portrait{position:relative; width:min(44%, 190px); justify-self:center}
}
.bio-dialog.is-flying, .bio-dialog.is-flying .bio-card{overflow:visible}
/* The card carries its own paper once open, so scrolled text never runs past it;
   the separate sheet is only used while the portrait is in flight. */
.bio-card{background:var(--travertine); box-shadow:inset 0 0 0 1px var(--rule), inset 0 3px 0 var(--gilt), 0 40px 90px -40px rgba(10,12,20,.55)}
.bio-dialog.is-flying .bio-card{background:transparent; box-shadow:0 40px 90px -40px rgba(10,12,20,.55)}
.bio-dialog:not(.is-flying) .bio-sheet{display:none}

/* ---------- Light / dark toggle ---------- */
.theme-toggle{display:grid; place-items:center; flex:none; width:36px; height:36px; padding:0; border:0; border-radius:50%; background:transparent; color:var(--ink-2); cursor:pointer; transition:color .3s, background-color .3s}
.theme-toggle:hover{color:var(--lapis); background:color-mix(in srgb, var(--ink) 7%, transparent)}
.theme-toggle svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linejoin:round; transition:fill .4s ease}
.theme-toggle[aria-pressed="true"] svg{fill:currentColor}
.theme-toggle--push{margin-left:auto}
.theme-fading, .theme-fading *{transition:background-color .6s ease, color .6s ease, border-color .6s ease, fill .6s ease, stroke .6s ease, box-shadow .6s ease !important}
@media (prefers-reduced-motion: reduce){ .theme-fading, .theme-fading *{transition:none !important} }
@media (max-width:420px){ .site-head{gap:6px} .theme-toggle{width:32px; height:32px} }

/* Launch reads as a single record: status on the left, sign-up on the right, between rules */
.gallery--launch .body{grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); column-gap:clamp(24px, 4vw, 56px); align-items:end; padding-block:clamp(22px, 2.4vw, 32px); border-block:1px solid var(--ink)}
.gallery--launch .quick-form{max-width:none}
@media (max-width:760px){ .gallery--launch .body{grid-template-columns:1fr; row-gap:20px} }
.team .role{line-height:1.5; margin-top:2px}
.team .affil{margin-top:4px}

/* A note that follows a visually hidden heading sits at the top of its gallery */
.sr-only + .section-note{margin-top:0}

/* ---------- Mission & Vision: the one gallery with the lights lowered ---------- */
.gallery--nocturne{
  --travertine:#16181B; --travertine-2:#1F2125; --ink:#E6E0D4; --ink-2:#B5AFA4; --caption:#938E84;
  --rule:#33353A; --lapis:#AEBDE6; --gilt:#C6A86E; --light:rgba(255,226,170,.16); --error:#E3907F;
  background:var(--travertine); color:var(--ink); color-scheme:dark; border-top-color:transparent;
  padding-block:clamp(72px, 8vw, 120px) clamp(64px, 7vw, 104px)}
:root[data-theme="dark"] .gallery--nocturne{--travertine:#0D0E10; --travertine-2:#16171A; --rule:#2A2B30; --light:rgba(255,226,170,.12)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .gallery--nocturne{--travertine:#0D0E10; --travertine-2:#16171A; --rule:#2A2B30; --light:rgba(255,226,170,.12)} }
.gallery--nocturne + .gallery{border-top-color:transparent}
.gallery--nocturne .body{gap:clamp(40px, 4.5vw, 64px)}
.stakes{font-family:var(--display); font-weight:400; font-size:clamp(28px, 3.3vw, 48px); line-height:1.16; letter-spacing:-.012em; max-width:24ch; text-wrap:balance; color:var(--ink)}
.stakes em{font-style:italic; color:var(--gilt)}
.gallery--nocturne .inscribed{font-size:clamp(24px, 2.6vw, 38px); line-height:1.24; max-width:28ch}
.gallery--nocturne .inscriptions{padding-top:clamp(28px, 3vw, 40px); border-top:1px solid var(--rule)}

/* Team portraits with a photograph: the image fills the mat, lit like the monograms */
.portrait.has-photo{place-items:stretch; overflow:hidden}
.portrait img{display:block; width:100%; height:100%; object-fit:cover; object-position:50% 20%; filter:saturate(.92) sepia(.06)}
:root[data-theme="dark"] .portrait img{filter:saturate(.88) brightness(.92)}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .portrait img{filter:saturate(.88) brightness(.92)} }