/* ------------------------------------------------ project cards, shared with the story page */
.pcs{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,250px),1fr));
  gap:var(--space-xl) clamp(18px,2vw,32px);margin-top:var(--space-xl)}
.pc{min-width:0;scroll-margin-top:110px}
.pc-img{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--color-bone)}
.pc-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease-out)}
.pc:hover .pc-img img{transform:scale(1.035)}
.pc-img.art img{object-fit:contain;padding:8% 16% 16%}
.pc-img.ph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.pc-img.ph img{width:34px;height:auto;opacity:.45}
.pc:hover .pc-img.ph img,.pc:hover .pc-img.art img{transform:none}
.pc-img .lbl{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--color-soft)}
.pc-img.art .lbl{position:absolute;left:14px;bottom:12px}
.pc-st{display:flex;flex-wrap:wrap;align-items:stretch;margin-top:16px;font-size:clamp(11px,.78vw,12px);line-height:1;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--color-ink)}
.pc-tag{display:inline-flex;align-items:center;padding:7px 10px 6px;background:var(--color-ink);color:var(--color-paper);border:1px solid var(--color-ink)}
.pc-tag.on{background:var(--color-gold);border-color:var(--color-gold);color:var(--color-ink)}
.pc-yr{display:inline-flex;align-items:center;padding:7px 10px 6px;border:1px solid var(--color-ink);border-left:0}
.pc-tag.on + .pc-yr{border-color:var(--color-gold)}
.pc-nm{font-family:var(--font-body);font-weight:400;font-size:var(--text-lg);line-height:1.3;color:var(--color-ink);margin-top:8px}
.pc-sc{font-size:var(--text-sm);line-height:1.55;color:var(--color-soft);margin-top:6px}
.pc-lc{font-size:var(--text-sm);line-height:1.5;color:var(--color-text);margin-top:4px}
.pcs{grid-auto-flow:row dense}
.pc.ft{grid-column:span 2;grid-row:span 2;align-self:start}
.pc.ft .pc-nm{font-size:var(--text-xl)}
@media (max-width:640px){.pc.ft{grid-column:auto;grid-row:auto}}

/* ============================================================ story page
 * Hallmark · macrostructure: year ledger with a side index · studied: thesujanlife.com/our-story
 * devices: year list with project marks, year pour, every project under its year,
 *          delivery bars from certificates
 * pre-emit critique: P5 H4 E4 S5 R4 V4
 */
.nav a.link[aria-current="page"]{color:var(--color-warm)}
.nav a.link[aria-current="page"]::after{transform:scaleX(1)}

/* ------------------------------------------------ opening */
.s-hero{position:relative;background:var(--color-black);color:var(--color-warm-dim);min-height:88svh;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-xl);
  padding:clamp(140px,20vh,210px) 0 clamp(28px,5vh,56px)}
.s-hero .top{display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);gap:clamp(32px,6vw,120px);align-items:end}
.s-hero h1{font-family:var(--font-display);font-size:var(--text-hero);overflow-wrap:normal;letter-spacing:.03em;line-height:1;color:var(--color-warm)}
.s-hero h1 .after{color:var(--color-warm-dim);font-size:.3em;margin-top:.6em}
.s-hero .lead{color:var(--color-warm-dim);max-width:40ch}
@media (max-width:900px){.s-hero .top{grid-template-columns:minmax(0,1fr)}}
.gline{position:relative;padding-top:58px}
.gline .gen{position:absolute;bottom:34px;left:calc(var(--a)*100%);width:calc((var(--b) - var(--a))*100%);
  border-bottom:1px solid var(--color-warm-dim);padding-bottom:10px;display:flex;flex-direction:column;gap:2px;
  font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.gline .gen::before{content:"";position:absolute;bottom:-5px;left:0;width:1px;height:9px;background:currentColor}
.gline .gen b{font-weight:500;color:var(--color-warm)}
.gline .gen em{font-style:normal}
.gline .g3{border-bottom:2px solid var(--color-gold);align-items:flex-end;text-align:right}
.gline .g3::before{background:var(--color-gold)}
.gline .g3 b{color:var(--color-gold)}
.gl-ends{display:flex;justify-content:space-between;font-size:var(--text-xs);letter-spacing:.12em;color:var(--color-warm-dim)}
@media (max-width:640px){.gline .gen b{display:none}}

/* ------------------------------------------------ the ledger, with the year list */
.ledger{display:grid;grid-template-columns:clamp(132px,11vw,170px) minmax(0,1fr);gap:clamp(28px,4.5vw,88px);
  background:var(--color-paper)}
.rail{position:sticky;top:96px;height:calc(100svh - 128px);display:flex;flex-direction:column;
  padding-top:var(--space-xl);align-self:start}
.rail ol{list-style:none;flex:1;display:flex;flex-direction:column;justify-content:space-between;
  border-left:1px solid var(--color-hair);min-height:0}
.rail a{position:relative;display:flex;align-items:center;gap:12px;padding:2px 0 2px 16px;min-height:22px;
  color:var(--color-soft);transition:color var(--dur-fast) var(--ease-out)}
.rail a::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--color-gold-deep);
  transform:scaleY(0);transition:transform var(--dur-med) var(--ease-out)}
.rail a:hover,.rail a[aria-current="true"]{color:var(--color-ink)}
.rail a[aria-current="true"]::before{transform:scaleY(1)}
.ry{font-size:13px;letter-spacing:.04em;line-height:1;min-width:2.6em}
.rail a[aria-current="true"] .ry{font-weight:500}
.rt{display:flex;gap:2px;align-items:center;flex-wrap:wrap}
.rt i{display:block;width:3px;height:10px;background:var(--color-hair);transition:background var(--dur-med) var(--ease-out)}
.rail a[aria-current="true"] .rt i,.rail a:hover .rt i{background:var(--color-gold-deep)}
.rt em{font-style:normal;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase}
.rail-key{display:flex;align-items:center;gap:8px;margin-top:var(--space-md);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--color-soft)}
.rail-key i{display:block;width:3px;height:10px;background:var(--color-gold-deep)}

.entries{list-style:none;padding-bottom:var(--space-xl);min-width:0}
.entry{position:relative;isolation:isolate;padding-block:var(--space-2xl) var(--space-xl);border-top:1px solid var(--color-hair);
  scroll-margin-top:70px}
.entry:first-child{border-top:0;padding-top:var(--space-xl)}
/* the year numerals: Source Serif 4 at its display optical size, the family Sawhney Figures was cut from,
   in Engraved Gold (Pawan chose option A, 17 October 2026). The year rests as a faint engraving and fills
   with gold as it is read. */
@font-face{font-family:"Display Figures";src:url("../fonts/SourceSerif4-Variable.woff2") format("woff2");
  font-weight:200 900;font-display:swap}
.yr{font-family:"Display Figures",var(--font-body);font-weight:250;font-variation-settings:"opsz" 60;
  font-size:clamp(104px,15vw,268px);line-height:.8;letter-spacing:-.02em;color:transparent;
  background:linear-gradient(0deg,var(--color-gold-deep) calc(var(--p,0)*100%),rgba(128,97,42,.2) calc(var(--p,0)*100%));
  -webkit-background-clip:text;background-clip:text;margin-bottom:var(--space-lg);width:max-content;max-width:100%}
.story + .story{margin-top:var(--space-2xl)}
.where{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--color-gold-deep);margin-bottom:14px}
.et{font-family:var(--font-body);font-weight:400;font-size:clamp(26px,2.5vw,42px);line-height:1.14;letter-spacing:-.012em;
  color:var(--color-ink);max-width:22ch;margin-bottom:var(--space-md)}
.text p:not(.where){margin-top:1em}
.text p:not(.where):first-of-type{margin-top:0}
.text em{font-style:italic}
.inl{border-bottom:1px solid var(--color-gold);color:var(--color-ink);transition:border-color var(--dur-fast) var(--ease-out)}
.inl:hover{border-bottom-color:var(--color-ink)}

.row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:end}
.plate .frame{aspect-ratio:3/2}
.plate.tall .frame{aspect-ratio:4/5;max-width:520px}
.plate.tall .frame.ph{max-width:420px}
.plate.tall:has(.frame.ph) .cap-under{max-width:420px}
.frame.ph,.frame.art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:var(--color-bone)}
.frame.ph img{width:46px;height:auto;opacity:.45;object-fit:contain}
.frame.art img{width:100%;height:100%;object-fit:contain;padding:8% 18% 14%}
.frame .lbl{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--color-soft)}
.frame.art .lbl{position:absolute;left:18px;bottom:14px}
.extra{margin-top:var(--space-xl)}
@media (max-width:1000px){.row{grid-template-columns:minmax(0,1fr)}}

.said blockquote::before{content:"“";display:block;font-family:var(--font-display);font-size:clamp(64px,6vw,104px);
  line-height:.5;height:.36em;color:var(--color-gold);margin-bottom:var(--space-sm)}
.said p{font-weight:300;font-size:clamp(20px,1.7vw,28px);line-height:1.45;color:var(--color-ink);max-width:36ch}
.said figcaption{display:flex;flex-direction:column;gap:4px;margin-top:var(--space-md);padding-top:var(--space-sm);max-width:560px;
  border-top:1px solid var(--color-hair);font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-soft)}
.said figcaption b{font-weight:500;color:var(--color-gold-deep)}
.said.small p{font-size:clamp(18px,1.4vw,23px)}

.names{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-lg)}
.names p{display:flex;flex-direction:column;gap:6px;padding-block:var(--space-md);border-top:1px solid var(--color-hair)}
.names b{font-family:var(--font-body);font-weight:300;font-size:clamp(24px,2.2vw,36px);line-height:1.15;color:var(--color-ink)}
.names .was b{color:var(--color-soft)}
.names span{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-soft)}
.names .now{border-top-color:var(--color-gold)}
.names .now span{color:var(--color-gold-deep)}
@media (max-width:640px){.names{grid-template-columns:minmax(0,1fr);gap:0}}

/* every other project of the year */
.story + .also{margin-top:var(--space-2xl)}
.also-h{font-size:var(--text-xs);letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:var(--color-ink);
  padding-bottom:14px;border-bottom:1px solid var(--color-ink);max-width:none}
.also .pcs{margin-top:var(--space-lg)}

/* the time allowed against the time taken */
.dlv{border-top:1px solid var(--color-ink);padding-top:var(--space-md);max-width:980px}
.dlv figcaption{display:flex;justify-content:space-between;gap:var(--space-sm);flex-wrap:wrap;margin-bottom:var(--space-md);
  font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-soft)}
.dlv figcaption b{font-weight:500;color:var(--color-ink)}
.dl{display:grid;grid-template-columns:86px minmax(0,1fr) 176px;gap:var(--space-md);align-items:center;padding-block:12px}
.dl .k{font-size:var(--text-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--color-soft)}
.dl .v{font-size:var(--text-sm);color:var(--color-ink);text-align:right;white-space:nowrap}
.track{position:relative;height:14px}
.track i,.track b{position:absolute;top:50%}
.track .plan{height:1px;background:var(--color-hair);transform:translateY(-50%)}
.track .act{height:6px;background:var(--color-ink);transform:translateY(-50%) scaleX(0);transform-origin:left;
  transition:transform 1.4s var(--ease-out)}
.dlv[data-in="true"] .track .act{transform:translateY(-50%) scaleX(1)}
.track .due{width:2px;height:14px;background:var(--color-gold);transform:translate(-1px,-50%)}
.axis{display:flex;justify-content:space-between;margin-left:calc(86px + var(--space-md));margin-right:calc(176px + var(--space-md));
  padding-top:8px;border-top:1px solid var(--color-hair);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-soft)}
.legend{max-width:none;display:flex;gap:var(--space-md);flex-wrap:wrap;margin-top:var(--space-md);font-size:var(--text-xs);
  letter-spacing:.14em;text-transform:uppercase;color:var(--color-soft)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.legend i{display:inline-block;width:22px}
.lg-plan{height:1px;background:var(--color-hair)}
.lg-act{height:6px;background:var(--color-ink)}
.lg-due{width:2px!important;height:12px;background:var(--color-gold)}
@media (max-width:640px){
  .dl{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .dl .track{grid-column:1 / -1;grid-row:2}
  .axis{margin-inline:0}
}

/* a year in the life of the city: quieter, no pour */
.entry.ctx .yr{background:none;color:var(--color-hair)}
.entry.ctx .where{color:var(--color-soft)}
.entry.ctx .et{font-size:clamp(22px,1.9vw,32px);max-width:30ch}

/* one wide plate, out to the edge */
.story.wide .plate{margin-right:calc(-1 * var(--gutter));margin-bottom:var(--space-xl)}
.story.wide .plate .frame{aspect-ratio:2/1}
.story.wide .plate .cap-under{margin-right:var(--gutter)}
.story.wide .row{grid-template-columns:minmax(0,1fr)}
.story.wide .text{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(28px,4vw,72px)}
.story.wide .text .where,.story.wide .text .et{grid-column:1}
.story.wide .text > p:not(.where){grid-column:2;grid-row:1 / span 2;align-self:end;margin:0}
@media (max-width:1000px){.story.wide .text{grid-template-columns:minmax(0,1fr)}
  .story.wide .text > p:not(.where){grid-column:1;grid-row:auto}}

/* the tribute, on black */
.band-in{position:relative;isolation:isolate;color:var(--color-warm-dim);padding-block:var(--space-xl)}
.band-in::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;
  left:calc(-1 * clamp(14px,2.2vw,44px));right:calc(-1 * var(--gutter));background:var(--color-black)}
.band-in .where{color:var(--color-gold)}
.band-in .et{color:var(--color-warm)}
.band-in .frame.ph{background:var(--color-coal)}
.band-in .frame .lbl{color:var(--color-warm-dim)}
.band-in .cap-under{color:var(--color-warm-dim)}
.band-in .cap-under b{color:var(--color-warm)}
.band-in .said p{color:var(--color-warm)}
.band-in .said figcaption{border-top-color:var(--color-warm-faint);color:var(--color-warm-dim)}
.band-in .said figcaption b{color:var(--color-gold)}

/* today */
.today-figs{margin-top:var(--space-2xl)}
.next{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap;margin-top:var(--space-xl)}

/* ------------------------------------------------ phones: the year shows in a strip under the nav */
.mrail{display:none}
@media (max-width:900px){
  .ledger{grid-template-columns:minmax(0,1fr)}
  .rail{display:none}
  .mrail{display:flex;align-items:center;justify-content:space-between;gap:14px;position:fixed;left:0;right:0;top:72px;z-index:55;
    height:44px;padding:0 var(--gutter);background:var(--color-paper);border-bottom:1px solid var(--color-hair);
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform var(--dur-med) var(--ease-out),opacity var(--dur-med) var(--ease-out),visibility var(--dur-med)}
  .mrail[data-show="true"]{transform:none;opacity:1;visibility:visible}
  .mrail .mr-y{font-weight:400;font-size:18px;color:var(--color-ink)}
  .mrail .mr-n{font-size:var(--text-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--color-gold-deep)}
  .band-in::before{left:calc(-1 * var(--gutter))}
  .story.wide .plate{margin-left:calc(-1 * var(--gutter))}
  .story.wide .plate .cap-under{margin-left:var(--gutter)}
}
@media (max-width:560px){.yr{font-size:clamp(88px,28vw,140px)}}

@media (prefers-reduced-motion:reduce){
  .yr{--p:1}
  .track .act{transform:translateY(-50%) scaleX(1)}
}

/* boost:story */
.bx{position:relative;overflow:hidden;isolation:isolate}
.bx > .wrap,.bx > .art{position:relative;z-index:1}
/* the sheet keeps the hero's scale however tall the section is, and fades out below its first screen */
.s-hero.bx > .bx-draw{top:var(--nav-h,78px)}
.bx > .bx-draw{position:absolute;left:0;right:0;top:0;height:min(100%,900px);z-index:0;pointer-events:none;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 0,#000 55%,transparent 100%)}
.bx > .bx-draw .dw{position:absolute;left:0;top:0;width:1960px;height:900px}
.bx .dw-c{stroke:rgba(239,234,225,.055);stroke-width:1;stroke-dasharray:42 7 4 7;vector-effect:non-scaling-stroke}
.bx .dw-b{fill:var(--color-black);stroke:rgba(239,234,225,.11);stroke-width:1;vector-effect:non-scaling-stroke}
.bx .dw-t{fill:rgba(239,234,225,.2);font-family:var(--font-display);font-size:22px;letter-spacing:.04em;text-anchor:middle}
.bx .dw-d{stroke:rgba(239,234,225,.08);stroke-width:1;vector-effect:non-scaling-stroke}
.bx .dw-k{stroke:rgba(239,234,225,.16);stroke-width:1.4;vector-effect:non-scaling-stroke}
.bx .dw-n{fill:rgba(239,234,225,.17);font-family:"Figures",var(--font-body);font-size:16px;letter-spacing:.06em;text-anchor:middle}
/* on a light ground the sheet is drawn in graphite */
.bx.light .dw-c{stroke:rgba(42,43,45,.07)}
.bx.light .dw-b{fill:var(--color-bone);stroke:rgba(42,43,45,.13)}
.bx.light .dw-t{fill:rgba(42,43,45,.26)}
.bx.light .dw-d{stroke:rgba(42,43,45,.1)}
.bx.light .dw-k{stroke:rgba(42,43,45,.2)}
.bx.light .dw-n{fill:rgba(42,43,45,.24)}
/* the S mark, quietly, behind the footer */
/* the whole mark, uncut, set to the right and sized to the footer's height (Pawan, 17 October 2026) */
.foot-site.bx > .bx-ghost{position:absolute;z-index:0;pointer-events:none;right:max(var(--gutter,24px),3vw);top:50%;
  height:min(calc(100% - 72px),118vw);aspect-ratio:1333/1491;transform:translateY(-50%)}
.foot-site.bx > .bx-ghost .gh{width:100%;height:100%;overflow:visible}
.foot-site.bx .gh-form{fill:rgba(239,234,225,.032);stroke:none}
/* solid shapes, no outline: a quiet presence behind the footer, never line art (Pawan, 17 October 2026) */
.foot-site.bx .gh-gold{fill:rgba(210,175,109,.045);stroke:none}
.foot-site.bx > .wrap{position:relative;z-index:1}
@media (max-width:720px){.bx > .bx-draw .dw{width:1300px;height:597px}}

/* boost:era:start */
:root{--color-paper:rgb(var(--era,236,228,211))}
/* boost:era:end */