@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Source+Sans+3:wght@300;400&display=swap');

:root{
  --paper:#090909;
  --ink:#d7d0c2;
  --muted:#9d978c;
  --ivory:#d8d2c4;
  --raw:#aab9c8;
  --processed:#aebfae;
  --final:#c8aaa6;
  --line-blue:rgba(170,185,200,.14);
  --line-green:rgba(174,191,174,.12);
  --line-rose:rgba(200,170,166,.12);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--paper);color:var(--ink)}
body{font-family:"Source Sans 3",Arial,sans-serif;font-weight:300}
a{color:inherit;text-decoration:none}

/* COVER */
.cover{
  height:100vh;
  height:100svh;
  min-height:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(270px, 1fr) minmax(420px, .86fr);
  gap:clamp(32px,5vw,92px);
  align-items:center;
  padding:clamp(24px,3.6vh,44px) clamp(32px,6vw,110px);
  cursor:pointer;
}
.cover-copy{max-width:570px;align-self:center}
.brand{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(18px,1.35vw,24px);letter-spacing:.13em;text-transform:uppercase;color:#aaa7a0;margin-bottom:clamp(30px,5vh,54px)}
.cover h1{font-family:"Cormorant Garamond",Georgia,serif;font-weight:400;font-size:clamp(40px,4.7vw,72px);letter-spacing:.045em;margin:0 0 clamp(18px,2.4vh,28px);line-height:.96}
.cover-text{font-size:clamp(16px,1.22vw,20px);line-height:1.58;max-width:530px}
.cover-text p{margin:0 0 .92em}
.enter{margin-top:clamp(22px,3vh,32px);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:#aaa7a0}
.cover-art{justify-self:end;width:min(100%,610px);height:100%;max-height:calc(100svh - clamp(48px,7.2vh,88px));display:flex;align-items:center;justify-content:flex-end}
.cover-art img{display:block;width:auto;max-width:100%;height:auto;max-height:100%;object-fit:contain}

/* FLOWER PLATES — V3 DARK PRINT ROOM */
.plate{
  position:relative;
  height:100vh;
  min-height:620px;
  overflow:hidden;
  padding:clamp(26px,3.1vh,42px) clamp(34px,5vw,92px) clamp(62px,8.5vh,78px);
  display:grid;
  grid-template-columns:18fr 27fr 55fr;
  grid-template-rows:auto 1fr;
  column-gap:clamp(26px,4vw,72px);
  row-gap:10px;
  background:#090909;
}
.plate::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 1000' preserveAspectRatio='none'%3E%3Cpath d='M-80 300 C260 165 500 270 760 430 S1220 670 1700 475' fill='none' stroke='%23aab9c8' stroke-opacity='.12' stroke-width='2'/%3E%3Cpath d='M-70 625 C270 730 515 570 790 625 S1215 795 1680 685' fill='none' stroke='%23aebfae' stroke-opacity='.10' stroke-width='2'/%3E%3Cpath d='M180 1040 C470 775 740 870 990 700 S1330 385 1660 455' fill='none' stroke='%23c8aaa6' stroke-opacity='.11' stroke-width='2'/%3E%3C/svg%3E");
  background-size:100% 100%;background-repeat:no-repeat;
}
.plate-brand{grid-column:1 / 3;grid-row:1;z-index:2;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(18px,1.35vw,24px);letter-spacing:.13em;text-transform:uppercase;color:#bdb5a6;align-self:start}
.stage{z-index:1;position:relative;display:flex;flex-direction:column;align-items:flex-start;margin:0}
.stage img{display:block;width:100%;height:auto;border:clamp(4px,.48vw,7px) solid var(--ivory);outline:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(0,0,0,.65);opacity:1;transition:opacity .18s ease}
.stage .caption{margin-top:10px;font-size:clamp(11px,.82vw,14px);letter-spacing:.17em;text-transform:uppercase;font-weight:400;white-space:nowrap}
.raw{grid-column:1;grid-row:2;align-self:start;margin-top:clamp(38px,7vh,74px)}
.processed{grid-column:2;grid-row:2;align-self:end;margin-bottom:clamp(0px,1vh,10px)}
.final{grid-column:3;grid-row:1 / 3;align-self:center;justify-self:end;width:100%;height:100%;max-height:calc(100vh - 92px);justify-content:center}
.final img{max-height:calc(100vh - 130px);width:auto;max-width:100%;object-fit:contain;align-self:flex-end}
.final .caption{align-self:flex-end}
.raw .caption{color:var(--raw)}
.processed .caption{color:var(--processed)}
.final .caption{color:var(--final)}
.nav{position:absolute;left:0;right:0;bottom:clamp(16px,2.5vh,26px);display:flex;justify-content:space-between;align-items:center;padding:0 clamp(24px,4vw,62px);z-index:3;border-top:1px solid rgba(216,210,196,.18);padding-top:12px}
.nav a{width:34px;height:34px;border:1px solid rgba(216,210,196,.52);border-radius:50%;display:grid;place-items:center;font-size:24px;line-height:1;color:#cfc7b7;transition:.2s ease;background:rgba(9,9,9,.82)}
.nav a:hover{border-color:var(--ivory);color:var(--ivory);background:#111}
.home-link{position:absolute;top:0;left:0;right:0;height:62px;z-index:2}

@media (max-width:800px){
  .cover{grid-template-columns:1fr;gap:42px;height:auto;min-height:100vh;overflow:visible;padding:34px 24px 48px;cursor:default}
  .brand{margin-bottom:48px}
  .cover-art{justify-self:center;width:min(88vw,520px);height:auto;max-height:none;order:-1}
  .enter{display:inline-block;border-bottom:1px solid #c9c6bf;padding-bottom:3px}
  .plate{display:block;height:auto;min-height:100vh;padding:28px 24px 104px;overflow:visible;background:#090909}
  .plate::before{opacity:.72}
  .plate-brand{display:block;margin-bottom:38px}
  .stage{margin:0 0 42px;align-items:flex-start}
  .stage img{border-width:5px}
  .raw{width:54%}
  .processed{width:72%;margin-left:12%}
  .final{width:100%;height:auto;max-height:none;margin-bottom:10px}
  .final img{width:100%;height:auto;max-height:none;align-self:auto}
  .final .caption{align-self:flex-start}
  .nav{position:fixed;bottom:max(12px, env(safe-area-inset-bottom));pointer-events:none;background:rgba(9,9,9,.88);padding:10px 20px 8px;border-top:1px solid rgba(216,210,196,.2)}
  .nav a{pointer-events:auto;background:#0b0b0b}
}