story /* Layout: an editorial film reel. Wide cinematic frames alternate with narrow reading columns; a gold "thread" runs between sections, tying traditions together. */ .faw{ --paper:#f6f3f1; --ink:#1e1a21; --muted:#6a6170; --line:#ddd5d6; --gold:#9c6b1c; --teal:#1f5a5e; --panel:#ece6e4; --frame:#120f14; --display:"Bodoni Moda","Didot","Bodoni 72",Georgia,serif; --body:"Libre Franklin","Helvetica Neue",Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace; } .faw{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.7;overflow-x:hidden} .faw *{box-sizing:border-box} .faw a{color:var(--teal)} .faw a:focus-visible,.faw summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px} .faw-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))} .faw-read{max-width:680px} .faw h1,.faw h2,.faw h3{font-family:var(--display);font-weight:500;line-height:1.12;text-wrap:balance;margin:0;color:var(--ink)} .faw h1{font-size:clamp(2.3rem,6vw,4.6rem);letter-spacing:-.01em} .faw h1 em,.faw h2 em{font-style:italic;color:var(--gold)} .faw h2{font-size:clamp(1.8rem,4vw,3rem)} .faw h3{font-size:1.45rem} .faw p{margin:0} .faw-stack{display:flex;flex-direction:column;gap:1.1rem} .faw-eyebrow{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} .faw-lede{font-size:1.2rem;color:var(--muted)} .faw-sec{padding-block:clamp(32px,5vw,60px)} .faw-thread{height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent);max-width:1180px;margin:0 auto;opacity:.6} /* hero */ .faw-hero{padding-block:clamp(28px,4vw,48px) 0} .faw-hero .faw-stack{max-width:860px} .faw-places{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase} /* film frames */ .faw-film{margin:0;display:flex;flex-direction:column;gap:.6rem} .faw-frame{position:relative;display:block;width:100%;max-width:100%;aspect-ratio:16/9;background:var(--frame);overflow:hidden;text-decoration:none} .faw-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .faw-cap{font-family:var(--mono);font-size:.76rem;letter-spacing:.05em;color:var(--muted);display:flex;flex-wrap:wrap;gap:.35rem 1rem} .faw-cap b{color:var(--ink);font-weight:500} .faw-wide{margin-top:clamp(18px,3vw,30px)} .faw-poster{display:flex;flex-direction:column;justify-content:flex-end;padding:clamp(14px,3vw,28px);color:#f3ece6;background:radial-gradient(120% 90% at 70% 20%,#3a2c3f 0%,#120f14 70%)} .faw-poster .t{font-family:var(--display);font-size:clamp(1.1rem,2.6vw,2rem);line-height:1.15;max-width:90%} .faw-poster .p{position:absolute;top:50%;left:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border:1px solid rgba(243,236,230,.7);border-radius:50%;display:grid;place-items:center;transition:transform .25s} .faw-poster .p::after{content:"";border-left:16px solid #f3ece6;border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px} .faw-poster:hover .p{transform:scale(1.08)} .faw-poster .tc{position:absolute;top:14px;left:16px;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;opacity:.7} /* split story rows */ .faw-story{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(22px,4vw,56px);align-items:center;padding-block:clamp(18px,2.5vw,28px);border-top:1px solid var(--line)} .faw-story:nth-of-type(even){grid-template-columns:1fr 1.55fr} .faw-story:nth-of-type(even) .faw-film{order:2} .faw-story > *{min-width:0} .faw-tag{display:inline-block;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--teal);border:1px solid var(--teal);padding:.15rem .55rem;margin-right:.35rem} /* traditions */ .faw-trad{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin-top:1.4rem} .faw-trad article{background:var(--paper);padding:1.6rem;display:flex;flex-direction:column;gap:.6rem;min-width:0} .faw-trad h3{font-size:1.3rem} .faw-trad .rites{font-family:var(--mono);font-size:.74rem;color:var(--gold);letter-spacing:.03em} .faw-trad p{font-size:.95rem;color:var(--muted)} /* planning steps */ .faw-steps{counter-reset:s;display:flex;flex-direction:column;gap:1.6rem;margin-top:1.4rem} .faw-step{display:grid;grid-template-columns:64px 1fr;gap:1rem} .faw-step::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--display);font-size:2.2rem;color:var(--gold);line-height:1} .faw-step > div{min-width:0;display:flex;flex-direction:column;gap:.6rem} .faw-step ul{margin:0;padding-left:1.1rem} .faw-inset{margin-block:.4rem} /* panels */ .faw-band{background:var(--panel)} .faw-two{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px)} .faw-two > *{min-width:0} .faw-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:.85rem} .faw-list li{padding-left:1.3rem;position:relative} .faw-list li::before{content:"";position:absolute;left:0;top:.75em;width:.6rem;height:1px;background:var(--gold)} .faw-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:clamp(18px,3vw,32px);margin-top:1.4rem} .faw-grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:20px;margin-top:1.4rem} .faw-quote{font-family:var(--display);font-style:italic;font-size:clamp(1.4rem,3vw,2.1rem);line-height:1.3;max-width:900px;color:var(--ink)} .faw-table{overflow-x:auto;margin-top:1.6rem;border:1px solid var(--line)} .faw-table table{border-collapse:collapse;width:100%;min-width:520px;font-size:.95rem}
Read More »
