/* ============================================================================
   PASARGAD — V32 · Craftsmanship page, vintage "since 1351" treatment
   Aged paper, sepia photographs, a family timeline. Loaded only on
   craftsmanship.html (body.page-vintage).
   ========================================================================= */

.page-vintage{
  --sepia-1:#efe3c8; --sepia-2:#e3d2ae; --sepia-3:#cdb68a;
  --sepia-ink:#2e2216; --sepia-text:#4d3b28; --sepia-rule:rgba(77,59,40,.22);
  --sepia-red:#7a3b22;
}

.page-vintage .page-hero .hero-bg img{
  filter:sepia(.45) brightness(.58) contrast(1.06) saturate(.8)!important}
.page-vintage .page-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse 85% 75% at 50% 45%,transparent 45%,rgba(20,12,4,.55) 100%),
    linear-gradient(180deg,rgba(60,38,18,.15),rgba(11,10,16,.55));
}
.page-vintage .page-hero .hero-inner{position:relative;z-index:2}
.page-vintage .hero-year{
  display:block;font-family:var(--display);font-style:italic;font-size:clamp(15px,1.5vw,19px);
  letter-spacing:.32em;color:var(--champagne);opacity:.85;margin-bottom:10px}

/* ---------------------------------------------------------- aged paper band */
.band.aged{
  color:var(--sepia-text);
  background:
    radial-gradient(ellipse 40% 30% at 8% 12%,rgba(122,80,30,.10),transparent 70%),
    radial-gradient(ellipse 35% 25% at 92% 78%,rgba(122,80,30,.12),transparent 70%),
    radial-gradient(ellipse 120% 90% at 50% 50%,transparent 55%,rgba(110,78,40,.22) 100%),
    linear-gradient(180deg,var(--sepia-1),var(--sepia-2));
  overflow:hidden;
}
.band.aged::before{ /* paper fibre */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .2 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
}
.band.aged > *{position:relative}
.band.aged h1,.band.aged h2,.band.aged h3{color:var(--sepia-ink)}
.band.aged em{color:var(--sepia-red)}
.band.aged .eyebrow{color:var(--sepia-red)}
.band.aged .eyebrow::before{background:var(--sepia-red)}
.band.aged .sec-num{color:rgba(77,59,40,.6)}
.band.aged .lead,.band.aged p{color:var(--sepia-text)}

/* ornamental rule */
.v-rule{display:flex;align-items:center;gap:18px;color:var(--sepia-red);margin:0 auto;max-width:520px}
.v-rule::before,.v-rule::after{content:"";flex:1;height:1px;background:var(--sepia-rule)}
.v-rule svg{width:26px;height:26px;flex:none;opacity:.8}

/* ------------------------------------------------------------- intro head */
.hist-head{text-align:center;max-width:860px;margin:0 auto clamp(54px,7vw,96px)}
.hist-head .since{
  display:block;font-family:var(--display);font-weight:300;line-height:.9;
  font-size:clamp(76px,13vw,184px);color:var(--sepia-ink);letter-spacing:.02em;
  margin:18px 0 8px}
.hist-head .since small{display:block;font-size:.16em;letter-spacing:.42em;color:var(--sepia-red);
  margin-bottom:.6em;font-style:italic}
.hist-head .lead{margin:22px auto 0;max-width:640px;font-size:clamp(16px,1.35vw,19px);line-height:2.05}
body.en .hist-head .lead{line-height:1.7}

/* --------------------------------------------------------------- timeline */
.timeline{position:relative;max-width:1180px;margin:0 auto;display:grid;gap:clamp(64px,9vw,130px)}
.timeline::before{ /* the spine */
  content:"";position:absolute;top:0;bottom:0;inset-inline-start:50%;width:1px;
  background:linear-gradient(180deg,transparent,var(--sepia-rule) 6%,var(--sepia-rule) 94%,transparent)}
.chapter{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,120px);align-items:center;position:relative}
.chapter::after{ /* bead on the spine */
  content:"";position:absolute;top:50%;inset-inline-start:50%;width:11px;height:11px;border-radius:50%;
  transform:translate(-50%,-50%);background:var(--sepia-1);border:1px solid var(--sepia-red)}
[dir="rtl"] .chapter::after{transform:translate(50%,-50%)}
.chapter:nth-child(even) .print{order:2}
.chapter .year{font-family:var(--display);font-size:clamp(46px,6vw,86px);line-height:1;color:var(--sepia-ink);
  font-weight:300;display:block;margin-bottom:10px}
.chapter .year-label{font-size:11.5px;letter-spacing:.28em;color:var(--sepia-red);text-transform:uppercase;display:block;margin-bottom:18px}
.chapter h3{font-family:var(--display);font-weight:400;font-size:clamp(24px,2.3vw,33px);line-height:1.35;margin-bottom:14px}
body:not(.en) .chapter h3{font-family:var(--ui);font-weight:400;font-size:clamp(20px,1.8vw,26px);line-height:1.7}
.chapter p{font-size:15.5px;line-height:2.05;max-width:46ch}
body.en .chapter p{font-size:18px;line-height:1.7}

/* old photographic print: white border, slight tilt, photo corners */
.print{position:relative;background:#f8f1e1;padding:14px 14px 52px;
  box-shadow:0 1px 0 rgba(0,0,0,.05),0 18px 40px -18px rgba(60,38,18,.55),0 2px 6px rgba(60,38,18,.18);
  transform:rotate(-1.6deg);transition:transform 1s var(--ease);max-width:460px;justify-self:center;width:100%}
.chapter:nth-child(even) .print{transform:rotate(1.4deg)}
.print:hover{transform:rotate(0) translateY(-4px)}
.print .ph{aspect-ratio:4/5;overflow:hidden;background:var(--sepia-3)}
.print .ph img{width:100%;height:100%;object-fit:cover;filter:sepia(.55) contrast(1.05) saturate(.75)!important}
.print figcaption{position:absolute;inset-inline:14px;bottom:14px;text-align:center;
  font-family:var(--display);font-style:italic;font-size:15px;color:#5b4630;letter-spacing:.04em}
body:not(.en) .print figcaption{font-family:var(--ui);font-style:normal;font-size:12.5px}
.print::before,.print::after{ /* photo corners */
  content:"";position:absolute;width:34px;height:34px;background:rgba(46,34,22,.82);
  clip-path:polygon(0 0,100% 0,0 100%)}
.print::before{top:-6px;left:-6px}
.print::after{bottom:-6px;right:-6px;transform:rotate(180deg)}

/* --------------------------------------------------------- the pull quote */
.hist-quote{max-width:900px;margin:clamp(70px,10vw,140px) auto 0;text-align:center}
.hist-quote blockquote{font-family:var(--display);font-weight:300;font-style:italic;
  font-size:clamp(24px,2.9vw,40px);line-height:1.55;color:var(--sepia-ink)}
body:not(.en) .hist-quote blockquote{font-family:var(--ui);font-style:normal;font-weight:300;
  font-size:clamp(19px,2vw,28px);line-height:2}
.hist-quote blockquote::before{content:"«";display:block;font-family:var(--display);font-size:2.4em;
  line-height:.6;color:var(--sepia-red);opacity:.6;margin-bottom:.25em}
body.en .hist-quote blockquote::before{content:"“"}
.hist-quote cite{display:block;margin-top:22px;font-style:normal;font-size:11.5px;letter-spacing:.3em;color:var(--sepia-red)}
.hist-note{margin-top:clamp(40px,5vw,64px);text-align:center;font-size:11px;letter-spacing:.12em;color:rgba(77,59,40,.55)}

/* existing craft bands get the old-paper tone too */
.page-vintage .band.paper{background:linear-gradient(180deg,var(--sepia-1),var(--sepia-2))}

@media (max-width:860px){.timeline::before,.chapter::after{inset-inline-start:22px}.chapter{grid-template-columns:1fr;gap:34px;padding-inline-start:52px}.chapter:nth-child(even) .print{order:0}.print{justify-self:start;max-width:380px}}
@media (prefers-reduced-motion:reduce){.print,.print:hover{transition:none}}

/* V32 · the craft bands below the story share the aged paper */
.page-vintage .page-hero .hero-bg img{filter:sepia(.45) brightness(.7) contrast(1.06) saturate(.8)!important}
.band.aged + .band.aged{border-top:1px solid var(--sepia-rule)}
.band.aged .cap{color:rgba(77,59,40,.62)}
.band.aged .link-arrow{color:var(--sepia-red)}

.band.aged .frame{background:var(--sepia-3)}
.band.aged .frame.inset::after{border-color:rgba(248,241,225,.45)}

/* V33 · workshop notebook */
.ledger{max-width:820px;margin:clamp(80px,11vw,150px) auto 0;padding:clamp(34px,4.5vw,60px) clamp(26px,5vw,72px);
  position:relative;background:
    repeating-linear-gradient(180deg,transparent 0 43px,rgba(77,59,40,.13) 43px 44px),
    linear-gradient(180deg,#f6ecd6,#efe2c4);
  box-shadow:0 22px 50px -26px rgba(60,38,18,.55),0 1px 0 rgba(255,255,255,.5) inset;transform:rotate(-.4deg)}
.ledger::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:clamp(18px,3vw,40px);width:1px;background:rgba(122,59,34,.35)}
.ledger-head{text-align:center;margin-bottom:22px}
.ledger-head h3{font-family:var(--display);font-weight:400;font-size:clamp(26px,2.6vw,36px)}
body:not(.en) .ledger-head h3{font-family:var(--ui);font-size:clamp(20px,2vw,27px)}
.ledger ol{list-style:none;counter-reset:l;display:grid}
.ledger li{counter-increment:l;display:flex;gap:18px;align-items:baseline;line-height:44px;font-size:16px;color:var(--sepia-ink)}
body.en .ledger li{font-size:19px}
.ledger li::before{content:counter(l,persian);font-family:var(--display);color:var(--sepia-red);font-size:20px;min-width:1.2em}
body.en .ledger li::before{content:counter(l)}

/* V33 · craft details: show the whole photograph (16:9), one large and two beside */
.page-vintage .material-strip{grid-template-columns:1fr 1fr;gap:clamp(14px,1.8vw,24px)}
.page-vintage .material-strip > div:first-child{grid-column:1 / -1}
.page-vintage .material-strip .frame{aspect-ratio:16/9;background:#2a2118;
  box-shadow:0 18px 40px -22px rgba(60,38,18,.6)}
.page-vintage .material-strip .frame img{object-position:50% 50%}
.page-vintage .band.aged .frame.inset::after{border-color:rgba(235,217,169,.32)}
@media (max-width:860px){.page-vintage .material-strip{grid-template-columns:1fr}}
body:not(.en) .ledger li::before{font-family:var(--ui);font-size:17px}
body:not(.en) .hist-quote blockquote::before{content:none}