/* ============================================================================
   LEA ORTEGA — HOMEPAGE LAYOUT
   Light earth-toned paper, a cut-stone geometry and a little metal. Depends on
   assets/lea-theme.css for the tokens, the facet marks and the sparkle.
   ========================================================================== */

/* the homepage ships its own box model so it is correct even standalone */
.lo-main,.lo-main *,.lo-main *::before,.lo-main *::after,
.lo-tick,.lo-tick *{box-sizing:border-box}

.lo-main{background:var(--lo-ivory);color:var(--lo-ink);font-family:var(--lo-sans);
 overflow-x:clip}
.lo-wrap{width:min(1280px,calc(100% - 64px));margin-inline:auto}
/* an HTML height attribute is a used value, not auto — it would defeat every
   aspect-ratio below. Reset it once here; fixed heights are set per rule. */
.lo-main img{max-width:100%;height:auto;display:block}

/* ---- shared type ---------------------------------------------------------- */
.lo-kick{display:flex;align-items:flex-start;gap:.85em;line-height:1.5;font-family:var(--lo-mono);
 font-size:11px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
 color:var(--lo-bronze-d);margin:0}
.lo-kick::before{content:"";width:6px;height:6px;flex:none;margin-top:.42em;
 background:var(--lo-gold);transform:rotate(45deg)}
.lo-h2{font-family:var(--lo-display);font-weight:500;
 font-variation-settings:'SOFT' 40,'WONK' 0;font-size:clamp(30px,4.1vw,58px);
 line-height:1.04;letter-spacing:-.022em;margin:16px 0 0;color:var(--lo-ink);
 text-wrap:balance}
.lo-lede{font-size:16.5px;line-height:1.72;color:var(--lo-cocoa);max-width:56ch;margin:0}

/* ---- buttons -------------------------------------------------------------- */
.lo-btn{position:relative;isolation:isolate;display:inline-flex;align-items:center;
 justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;
 font-family:var(--lo-mono);font-size:11px;font-weight:500;letter-spacing:.18em;
 text-transform:uppercase;text-decoration:none;cursor:pointer;
 clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);
 transition:transform .2s ease,box-shadow .2s ease,background .2s ease,color .2s ease}
.lo-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 opacity:0;transform:translateX(-135%);
 background:linear-gradient(74deg,transparent 40%,rgba(255,240,236,.34) 49%,
  rgba(255,240,236,.52) 51%,transparent 60%)}
.lo-btn:hover::before{animation:lo-sweep .85s ease-out}

.lo-btn-fill{background:var(--lo-espresso);color:var(--lo-ivory);
 box-shadow:inset 0 0 0 1px rgba(213,170,162,.45),var(--lo-shadow)}
.lo-btn-fill::before{animation:lo-sweep-idle 9s ease-in-out infinite 3.5s}
.lo-btn-fill:hover{background:var(--lo-ink);transform:translateY(-2px);
 box-shadow:inset 0 0 0 1px rgba(213,170,162,.8),var(--lo-shadow-lift)}
.lo-btn-fill:hover::before{animation:lo-sweep .85s ease-out}

.lo-btn-ghost{background:transparent;color:var(--lo-ink);
 box-shadow:inset 0 0 0 1px var(--lo-taupe)}
.lo-btn-ghost:hover{background:var(--lo-cream);color:var(--lo-bronze-d);
 box-shadow:inset 0 0 0 1px var(--lo-bronze)}

.lo-btn-bone{background:var(--lo-ivory);color:var(--lo-espresso);
 box-shadow:inset 0 0 0 1px rgba(213,170,162,.5),var(--lo-shadow)}
.lo-btn-bone:hover{background:#fff;transform:translateY(-2px);
 box-shadow:inset 0 0 0 1px var(--lo-gold),var(--lo-shadow-lift)}

/* ============================================================================
   HERO
   ========================================================================== */
.lo-hero{position:relative;padding:clamp(72px,9vw,128px) 0 0;
 background:linear-gradient(180deg,var(--lo-cream) 0%,var(--lo-ivory) 62%)}
.lo-grid-lines{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.lo-grid-lines::before{content:"";position:absolute;inset:-10% -20% 0;
 background:repeating-conic-gradient(from 0deg at 50% 116%,
  transparent 0 5.4deg,rgba(176,133,125,.075) 5.4deg 5.8deg);
 -webkit-mask-image:radial-gradient(120% 92% at 50% 112%,#000 0,transparent 74%);
 mask-image:radial-gradient(120% 92% at 50% 112%,#000 0,transparent 74%)}

.lo-hero-in{position:relative;z-index:1;display:grid;
 grid-template-columns:minmax(0,1.02fr) minmax(0,1fr);gap:clamp(32px,4vw,68px);
 align-items:center;padding-bottom:clamp(48px,6vw,86px)}

.lo-hero-copy{position:relative}
.lo-hero-copy h1{font-family:var(--lo-display);font-weight:500;
 font-variation-settings:'SOFT' 42,'WONK' 0;
 font-size:clamp(42px,6.2vw,86px);line-height:1.02;letter-spacing:-.028em;
 margin:22px 0 0;color:var(--lo-ink)}
/* the outlined line — engraved rather than printed */
.lo-out{color:transparent;-webkit-text-stroke:1px var(--lo-taupe);
 text-shadow:0 1px 0 rgba(255,255,255,.6)}
/* the word the light sits on */
.lo-acc{background-image:linear-gradient(100deg,var(--lo-bronze-d) 0 32%,
  var(--lo-gold) 46%,var(--lo-gold-lt) 50%,var(--lo-gold) 54%,var(--lo-bronze-d) 68% 100%);
 background-size:280% 100%;background-position:125% 0;
 -webkit-background-clip:text;background-clip:text;color:transparent;
 font-style:italic;animation:lo-shimmer 7s ease-in-out infinite}
.lo-hero-lede{margin:26px 0 0;max-width:48ch;font-size:17px;line-height:1.72;
 color:var(--lo-cocoa)}
.lo-hero-acts{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}

/* the photograph, cut as a stone and set in a bronze hairline */
.lo-hero-fig{position:relative;padding:10px;background:
 linear-gradient(140deg,rgba(213,170,162,.55),rgba(217,196,185,.25) 45%,rgba(213,170,162,.5));
 clip-path:var(--lo-stone)}
.lo-hero-fig>img{display:block;width:100%;height:clamp(360px,46vw,560px);
 object-fit:cover;clip-path:var(--lo-stone)}
.lo-plate{position:absolute;left:clamp(14px,2vw,26px);bottom:clamp(14px,2vw,26px);
 right:clamp(14px,10vw,120px);z-index:2;padding:20px 22px 18px;
 background:rgba(51,35,29,.9);
 -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
 box-shadow:inset 0 0 0 1px rgba(213,170,162,.34);
 clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.lo-plate .lo-kick{color:var(--lo-gold)}
.lo-plate strong{display:block;margin:10px 0 6px;font-family:var(--lo-display);
 font-weight:500;font-size:22px;letter-spacing:-.016em;color:var(--lo-ivory)}
.lo-plate p{margin:0;font-size:13.5px;line-height:1.6;color:rgba(241,230,223,.8)}
.lo-plate a{display:inline-block;margin-top:12px;font-family:var(--lo-mono);
 font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--lo-gold);
 text-decoration:none;border-bottom:1px solid rgba(213,170,162,.45);padding-bottom:2px}
.lo-plate a:hover{color:var(--lo-gold-lt);border-bottom-color:var(--lo-gold-lt)}

/* ---- the proof rail ------------------------------------------------------- */
.lo-rail{display:grid;grid-template-columns:repeat(4,1fr);
 border-top:1px solid var(--lo-clay);border-bottom:1px solid var(--lo-clay)}
.lo-rail>div{position:relative;padding:26px 8px 24px;text-align:center}
.lo-rail>div+div::before{content:"";position:absolute;left:0;top:50%;
 width:7px;height:7px;margin-top:-3.5px;margin-left:-3.5px;
 background:var(--lo-gold);transform:rotate(45deg)}
.lo-rail b{display:block;font-family:var(--lo-display);font-weight:500;
 font-size:clamp(30px,3.4vw,44px);line-height:1;letter-spacing:-.02em;color:var(--lo-ink)}
.lo-rail span{display:block;margin-top:9px;font-family:var(--lo-mono);font-size:10px;
 letter-spacing:.17em;text-transform:uppercase;color:var(--lo-umber)}

/* ============================================================================
   MATCHER — an espresso stone set into the paper
   ========================================================================== */
.lo-match{position:relative;margin:clamp(56px,7vw,96px) 0;
 padding:clamp(34px,4vw,54px) 0;background:var(--lo-espresso);
 clip-path:polygon(0 26px,26px 0,100% 0,100% calc(100% - 26px),
  calc(100% - 26px) 100%,0 100%)}
.lo-match::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:repeating-conic-gradient(from 0deg at 14% 116%,
  transparent 0 5.6deg,rgba(213,170,162,.10) 5.6deg 6deg);
 -webkit-mask-image:radial-gradient(85% 130% at 14% 112%,#000 0,transparent 74%);
 mask-image:radial-gradient(85% 130% at 14% 112%,#000 0,transparent 74%)}
.lo-match-in{position:relative;display:grid;
 grid-template-columns:minmax(0,1.25fr) repeat(4,minmax(0,1fr)) auto;
 gap:18px 20px;align-items:end}
.lo-match-lead .lo-kick{color:var(--lo-gold)}
.lo-match-lead b{display:block;margin-top:10px;font-family:var(--lo-display);
 font-weight:500;font-size:clamp(21px,2vw,27px);line-height:1.16;
 letter-spacing:-.016em;color:var(--lo-ivory)}
.lo-field label{display:block;margin-bottom:8px;font-family:var(--lo-mono);font-size:10px;
 letter-spacing:.17em;text-transform:uppercase;color:rgba(241,220,214,.68)}
.lo-field select{-webkit-appearance:none;appearance:none;width:100%;min-height:48px;
 padding:0 34px 0 14px;background:rgba(246,239,234,.06);color:var(--lo-ivory);
 border:1px solid rgba(213,170,162,.32);font:400 14px/1 var(--lo-sans);cursor:pointer;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23c9a566' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
 background-repeat:no-repeat;background-position:right 13px center;background-size:11px;
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.lo-field select:hover{border-color:rgba(213,170,162,.6)}
.lo-field select option{background:var(--lo-espresso);color:var(--lo-ivory)}
.lo-match-go{display:flex}
.lo-match-go .lo-btn{width:100%}

/* ============================================================================
   SECTION FURNITURE
   ========================================================================== */
.lo-sec{padding:clamp(56px,7vw,104px) 0}
.lo-sec-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
 gap:28px 52px;align-items:end;padding-bottom:24px;
 border-bottom:1px solid var(--lo-clay);position:relative}
.lo-sec-head::after{content:"";position:absolute;left:0;bottom:-4.5px;width:9px;height:9px;
 background:var(--lo-gold);transform:rotate(45deg)}

/* ============================================================================
   FLAGSHIP
   ========================================================================== */
.lo-flag{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
 background:var(--lo-espresso);position:relative;
 box-shadow:inset 0 0 0 1px rgba(213,170,162,.3),var(--lo-shadow-lift);
 clip-path:polygon(0 30px,30px 0,100% 0,100% calc(100% - 30px),
  calc(100% - 30px) 100%,0 100%)}
.lo-flag-body{position:relative;z-index:1;padding:clamp(30px,3.6vw,52px)}
.lo-flag-body .lo-kick{color:var(--lo-gold)}
.lo-flag-body h3{margin:14px 0 16px;font-family:var(--lo-display);font-weight:500;
 font-size:clamp(28px,3.1vw,42px);line-height:1.06;letter-spacing:-.022em;
 color:var(--lo-ivory)}
.lo-flag-body>p{margin:0;font-size:15.5px;line-height:1.72;color:rgba(241,230,223,.76);
 max-width:52ch}
.lo-spec{margin:26px 0 28px;border-top:1px solid rgba(213,170,162,.22)}
.lo-spec>div{display:flex;justify-content:space-between;align-items:baseline;gap:18px;
 padding:11px 0;border-bottom:1px solid rgba(213,170,162,.16)}
.lo-spec>div>span:first-child{font-family:var(--lo-mono);font-size:10px;
 letter-spacing:.17em;text-transform:uppercase;color:rgba(241,220,214,.6);flex:none}
.lo-spec>div>span:last-child{font-family:var(--lo-mono);font-size:13px;
 font-variant-numeric:tabular-nums;color:var(--lo-ivory);text-align:right}
.lo-flag-fig{position:relative;overflow:hidden}
.lo-flag-fig img{display:block;width:100%;height:100%;min-height:340px;object-fit:cover}
.lo-flag-chip{position:absolute;top:20px;right:20px;z-index:2;
 display:inline-flex;align-items:center;gap:9px;padding:9px 15px;
 background:rgba(51,35,29,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
 box-shadow:inset 0 0 0 1px rgba(213,170,162,.45);
 font-family:var(--lo-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
 color:var(--lo-gold-lt);
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px)}
.lo-flag-chip::before{content:"";width:6px;height:6px;flex:none;background:var(--lo-gold);
 transform:rotate(45deg)}

/* ============================================================================
   THE INDEX — a ledger of addresses
   ========================================================================== */
.lo-ledger{margin-top:6px}
.lo-row{display:grid;
 grid-template-columns:44px 132px minmax(0,1.5fr) minmax(0,1.15fr) minmax(0,.9fr);
 gap:24px;align-items:center;padding:20px 14px 20px 4px;text-decoration:none;
 border-bottom:1px solid var(--lo-clay);position:relative;
 transition:background .25s ease,padding .25s ease}
.lo-row::after{content:"";position:absolute;right:14px;top:50%;width:7px;height:7px;
 margin-top:-3.5px;background:var(--lo-gold);transform:rotate(45deg) scale(0);
 transition:transform .25s ease}
.lo-row:hover{background:var(--lo-cream);padding-left:14px}
.lo-row:hover::after{transform:rotate(45deg) scale(1)}
.lo-row-n{font-family:var(--lo-mono);font-size:11px;letter-spacing:.1em;
 color:var(--lo-taupe)}
.lo-row-fig{display:block;overflow:hidden;clip-path:var(--lo-stone);
 --lo-cut:var(--lo-cut-sm)}
.lo-row-fig img{display:block;width:132px;height:88px;object-fit:cover;
 transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.lo-row:hover .lo-row-fig img{transform:scale(1.06)}
.lo-status{display:inline-block;margin-bottom:7px;font-family:var(--lo-mono);font-size:9.5px;
 letter-spacing:.17em;text-transform:uppercase;color:var(--lo-bronze-d)}
.lo-row-name{display:block;font-family:var(--lo-display);font-weight:500;font-size:22px;
 letter-spacing:-.016em;color:var(--lo-ink);line-height:1.15}
.lo-row-loc{display:block;margin-top:5px;font-size:13.5px;color:var(--lo-umber)}
.lo-row-meta{font-family:var(--lo-mono);font-size:11.5px;line-height:1.6;
 color:var(--lo-umber)}
.lo-row-price{text-align:right;font-family:var(--lo-mono);font-size:14px;
 font-variant-numeric:tabular-nums;color:var(--lo-ink);padding-right:16px}
.lo-row-price span{display:block;margin-top:6px;font-size:10px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--lo-taupe)}
.lo-ledger-foot{display:flex;flex-wrap:wrap;justify-content:space-between;
 align-items:center;gap:18px;padding-top:26px}

/* ============================================================================
   THE DIFFERENCE — four cut cards
   ========================================================================== */
.lo-diff{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.lo-diff article{position:relative;padding:28px 24px 26px;background:var(--lo-cream);
 border:1px solid var(--lo-clay);transition:background .25s ease,border-color .25s ease,
 transform .25s ease,box-shadow .25s ease}
.lo-diff article::after{content:"";position:absolute;top:-1px;right:-1px;
 width:var(--lo-cut);height:var(--lo-cut);pointer-events:none;
 background:linear-gradient(to bottom left,var(--lo-ivory) 0 calc(50% - .6px),
  var(--lo-clay) calc(50% - .6px) calc(50% + .6px),transparent calc(50% + .6px) 100%)}
.lo-diff article:hover{background:#fff;border-color:var(--lo-bronze);
 transform:translateY(-3px);box-shadow:var(--lo-shadow)}
.lo-diff-n{font-family:var(--lo-display);font-weight:500;font-size:34px;line-height:1;
 color:transparent;-webkit-text-stroke:1px var(--lo-taupe)}
.lo-diff h3{margin:16px 0 10px;font-family:var(--lo-display);font-weight:500;font-size:21px;
 letter-spacing:-.016em;color:var(--lo-ink)}
.lo-diff p{margin:0;font-size:14.5px;line-height:1.68;color:var(--lo-cocoa)}

/* ============================================================================
   GALLERY
   ========================================================================== */
.lo-gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.lo-gal figure{margin:0}
.lo-gal img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
 clip-path:var(--lo-stone);transition:transform .6s cubic-bezier(.22,.61,.36,1)}
.lo-gal figure:hover img{transform:scale(1.03)}
.lo-gal figcaption{padding:16px 2px 0}
.lo-gal figcaption em{display:block;font-family:var(--lo-mono);font-size:10px;
 font-style:normal;letter-spacing:.17em;text-transform:uppercase;color:var(--lo-bronze-d)}
.lo-gal figcaption b{display:block;margin:9px 0 6px;font-family:var(--lo-display);
 font-weight:500;font-size:20px;letter-spacing:-.014em;color:var(--lo-ink)}
.lo-gal figcaption p{margin:0;font-size:14px;line-height:1.62;color:var(--lo-umber)}

/* ============================================================================
   ABOUT — a linen band
   ========================================================================== */
.lo-about{position:relative;background:var(--lo-linen);
 border-top:1px solid var(--lo-clay);border-bottom:1px solid var(--lo-clay)}
.lo-about-in{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
 gap:clamp(32px,4.5vw,72px);align-items:center}
.lo-about-fig{position:relative;padding:9px;
 background:linear-gradient(140deg,rgba(213,170,162,.6),rgba(217,196,185,.3) 48%,
  rgba(213,170,162,.55));clip-path:var(--lo-stone)}
.lo-about-fig img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;
 object-position:center top;clip-path:var(--lo-stone)}
.lo-quote{margin:22px 0 24px;font-family:var(--lo-display);font-weight:500;
 font-style:italic;font-size:clamp(20px,2.2vw,27px);line-height:1.42;
 letter-spacing:-.014em;color:var(--lo-bronze-d);max-width:30ch}
.lo-cred{margin:30px 0 26px;border-top:1px solid var(--lo-clay)}
.lo-cred>div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
 padding:11px 0;border-bottom:1px solid var(--lo-clay)}
.lo-cred>div>span:first-child{font-family:var(--lo-mono);font-size:10px;letter-spacing:.17em;
 text-transform:uppercase;color:var(--lo-umber);flex:none}
.lo-cred>div>span:last-child{font-family:var(--lo-mono);font-size:13px;
 font-variant-numeric:tabular-nums;color:var(--lo-ink);text-align:right}
.lo-chips{display:flex;flex-wrap:wrap;gap:10px}
.lo-chip{display:inline-flex;align-items:center;gap:9px;padding:11px 17px;
 background:var(--lo-ivory);box-shadow:inset 0 0 0 1px var(--lo-clay);
 font-family:var(--lo-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
 color:var(--lo-ink);text-decoration:none;
 clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);
 transition:background .2s ease,box-shadow .2s ease,color .2s ease}
.lo-chip .ci{color:var(--lo-bronze);font-size:14px}
.lo-chip:hover{background:#fff;color:var(--lo-bronze-d);
 box-shadow:inset 0 0 0 1px var(--lo-bronze)}

/* ============================================================================
   JOURNAL
   ========================================================================== */
.lo-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.lo-post{display:block;text-decoration:none;position:relative;
 transition:transform .25s ease}
.lo-post:hover{transform:translateY(-3px)}
.lo-post-fig{display:block;overflow:hidden;clip-path:var(--lo-stone)}
.lo-post-fig img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;
 transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.lo-post:hover .lo-post-fig img{transform:scale(1.05)}
.lo-post-body{display:block;padding:16px 2px 0}
.lo-post-meta{display:block;font-family:var(--lo-mono);font-size:10px;letter-spacing:.15em;
 text-transform:uppercase;color:var(--lo-bronze-d)}
.lo-post h3{margin:11px 0 9px;font-family:var(--lo-display);font-weight:500;font-size:20px;
 line-height:1.24;letter-spacing:-.015em;color:var(--lo-ink)}
.lo-post p{margin:0;font-size:14px;line-height:1.66;color:var(--lo-umber)}

/* ============================================================================
   FAQ
   ========================================================================== */
.lo-faq{border-top:1px solid var(--lo-clay);margin-top:34px}
.lo-faq details{border-bottom:1px solid var(--lo-clay)}
.lo-faq summary{display:flex;align-items:center;gap:16px;padding:20px 2px;cursor:pointer;
 list-style:none;font-family:var(--lo-display);font-weight:500;
 font-size:clamp(17px,1.6vw,21px);letter-spacing:-.012em;color:var(--lo-ink);
 transition:color .2s ease}
.lo-faq summary::-webkit-details-marker{display:none}
.lo-faq summary::before{content:"";width:9px;height:9px;flex:none;background:var(--lo-gold);
 transform:rotate(45deg);transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.lo-faq summary:hover{color:var(--lo-bronze-d)}
.lo-faq details[open] summary::before{transform:rotate(135deg) scale(1.12)}
.lo-faq details p{margin:0 0 22px;padding-left:25px;max-width:78ch;font-size:15.5px;
 line-height:1.74;color:var(--lo-cocoa)}

/* ============================================================================
   CLOSE — the last stone
   ========================================================================== */
.lo-close{position:relative;background:var(--lo-espresso);overflow:hidden;
 padding:clamp(64px,8vw,116px) 0}
.lo-close::before{content:"";position:absolute;inset:0;pointer-events:none;
 background:repeating-conic-gradient(from 0deg at 50% 118%,
  transparent 0 5.6deg,rgba(213,170,162,.11) 5.6deg 6deg);
 -webkit-mask-image:radial-gradient(120% 100% at 50% 114%,#000 0,transparent 72%);
 mask-image:radial-gradient(120% 100% at 50% 114%,#000 0,transparent 72%)}
.lo-close-in{position:relative;z-index:1;text-align:center;max-width:760px;
 margin-inline:auto}
.lo-close-in .lo-kick{justify-content:center;color:var(--lo-gold)}
.lo-close h2{margin:18px 0 18px;font-family:var(--lo-display);font-weight:500;
 font-size:clamp(32px,4.4vw,60px);line-height:1.06;letter-spacing:-.024em;
 color:var(--lo-ivory);text-wrap:balance}
.lo-close>.lo-wrap>p{margin:0 auto;max-width:56ch;font-size:16.5px;line-height:1.72;
 color:rgba(241,230,223,.76)}
.lo-close-acts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:34px}
.lo-close-alt{display:block;margin-top:24px;font-family:var(--lo-mono);font-size:11px;
 letter-spacing:.12em;color:rgba(241,220,214,.62)}
.lo-close-alt a{color:var(--lo-gold);text-decoration:none;
 border-bottom:1px solid rgba(213,170,162,.4)}
.lo-close-alt a:hover{color:var(--lo-gold-lt)}

/* ============================================================================
   REVEAL — opt-in, so the page is never blank without JS
   ========================================================================== */
.lo-anim .lo-up{opacity:0;transform:translateY(16px);
 transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.lo-anim .lo-up.lo-in{opacity:1;transform:none}

/* ============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1080px){
 .lo-hero-in{grid-template-columns:1fr;gap:38px}
 .lo-match-in{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lo-match-lead{grid-column:1/-1}
 .lo-match-go{grid-column:1/-1}
 .lo-flag{grid-template-columns:1fr}
 .lo-flag-fig{order:-1;min-height:300px}
 .lo-diff{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lo-gal,.lo-posts{grid-template-columns:repeat(2,minmax(0,1fr))}
 .lo-about-in{grid-template-columns:1fr}
 .lo-about-fig{max-width:360px}
 .lo-row{grid-template-columns:34px 108px minmax(0,1.4fr) minmax(0,1fr);
  gap:18px}
 .lo-row-price{grid-column:3/-1;text-align:left;padding-right:0}
}
@media (max-width:720px){
 .lo-wrap{width:calc(100% - 36px)}
 .lo-sec-head{grid-template-columns:1fr;gap:16px}
 .lo-rail{grid-template-columns:repeat(2,1fr)}
 .lo-rail>div:nth-child(3)::before{display:none}
 .lo-match-in{grid-template-columns:1fr}
 .lo-diff,.lo-gal,.lo-posts{grid-template-columns:1fr}
 .lo-row{grid-template-columns:64px minmax(0,1fr);gap:14px;padding:18px 0}
 .lo-row-n{display:none}
 .lo-row-fig img{width:64px;height:64px}
 .lo-row-meta{grid-column:2}
 .lo-row-price{grid-column:2;text-align:left}
 .lo-plate{right:clamp(14px,4vw,26px)}
 .lo-btn{width:100%}
 .lo-hero-acts,.lo-close-acts{flex-direction:column}
}

/* ============================================================================
   TICKER — a thin espresso band with a gold stone between each claim
   ========================================================================== */
.lo-tick{position:fixed;top:0;left:0;right:0;z-index:1001;height:36px;overflow:hidden;
 background:var(--lo-espresso);color:var(--lo-cream);
 box-shadow:inset 0 -1px 0 rgba(213,170,162,.28)}
.lo-tick-track{display:flex;white-space:nowrap;will-change:transform;
 animation:lo-roll 46s linear infinite}
.lo-tick span{position:relative;padding:0 30px;line-height:36px;
 font-family:var(--lo-mono);font-size:10px;letter-spacing:.24em;text-transform:uppercase;
 color:rgba(241,230,223,.84)}
.lo-tick span::after{content:"";position:absolute;right:-3px;top:50%;width:6px;height:6px;
 margin-top:-3px;background:var(--lo-gold);transform:rotate(45deg)}
@keyframes lo-roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.lo-tick-track{animation:none}}
body.lo-home .uknav{top:36px}
body.lo-home .lo-hero{padding-top:clamp(96px,11vw,150px)}

/* ---- the closing call to action is the one moment the metal goes solid ---- */
.lo-close .lo-btn-fill{
 background:linear-gradient(102deg,var(--lo-bronze) 0%,var(--lo-gold) 26%,
  var(--lo-gold-lt) 50%,var(--lo-gold) 74%,var(--lo-bronze) 100%);
 background-size:220% 100%;background-position:60% 0;
 color:var(--lo-espresso);box-shadow:0 10px 34px -14px rgba(213,170,162,.65);
 transition:background-position .5s ease,transform .2s ease,box-shadow .2s ease}
.lo-close .lo-btn-fill:hover{background-position:0 0;transform:translateY(-2px);
 box-shadow:0 16px 44px -14px rgba(213,170,162,.8)}
.lo-close .lo-btn-ghost{color:var(--lo-cream);box-shadow:inset 0 0 0 1px rgba(213,170,162,.45)}
.lo-close .lo-btn-ghost:hover{background:rgba(213,170,162,.12);color:var(--lo-gold-lt);
 box-shadow:inset 0 0 0 1px var(--lo-gold)}


/* ============================================================================
   CLIENT TONE — 2026-09-13
   The client's reference (client-assets/sample_site_color_tone.jpg): blush
   paper, a warm-brown serif headline, a letter-spaced sans kicker in dusty
   rose, grey-brown reading copy and a rose button with brown serif text. No
   dark slabs anywhere on the homepage. These rules sit last and win.
   ========================================================================== */

/* ---- hero: short and simple, the reference's structure ------------------- */
.lo-hero{background:var(--lo-ivory)}
.lo-grid-lines{display:none}
.lo-hero-copy h1{font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 0,'opsz' 144;
 font-size:clamp(46px,6.6vw,96px);line-height:1.04;letter-spacing:-.02em;margin-top:18px}
.lo-hero-copy .lo-kick{font-size:13px;letter-spacing:.26em;color:var(--lo-bronze-d)}
.lo-hero-copy .lo-kick::before{display:none}
.lo-hero-lede{font-size:clamp(17px,1.5vw,20px);line-height:1.6;max-width:46ch;
 color:var(--lo-cocoa)}

/* ---- buttons: the reference's rose tablet, serif label, soft corners ----- */
.lo-btn{clip-path:none;border-radius:4px;min-height:54px;padding:0 28px;
 font-family:var(--lo-display);font-size:17px;font-weight:500;letter-spacing:0;
 text-transform:none;font-variation-settings:'SOFT' 0,'WONK' 0}
.lo-btn-fill,.lo-close .lo-btn-fill{background:var(--lo-gold);color:#3d2a24;
 box-shadow:none;background-size:auto}
.lo-btn-fill:hover,.lo-close .lo-btn-fill:hover{background:#cb9c93;color:#2a1a13;
 transform:translateY(-2px);box-shadow:0 12px 28px -16px rgba(140,94,86,.55)}
.lo-btn-ghost,.lo-close .lo-btn-ghost{background:transparent;color:var(--lo-ink);
 box-shadow:inset 0 0 0 1px var(--lo-taupe)}
.lo-btn-ghost:hover,.lo-close .lo-btn-ghost:hover{background:var(--lo-cream);
 color:var(--lo-bronze-d);box-shadow:inset 0 0 0 1px var(--lo-bronze)}
.lo-btn-bone{background:var(--lo-ivory);color:var(--lo-ink);
 box-shadow:inset 0 0 0 1px var(--lo-clay)}
.lo-btn-bone:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--lo-bronze)}

/* ---- the portrait, cut as a stone in a rose girdle ----------------------- */
.lo-hero-fig{background:linear-gradient(140deg,rgba(213,170,162,.75),
 rgba(241,220,214,.5) 45%,rgba(213,170,162,.7));max-width:520px;justify-self:end;width:100%}
.lo-hero-fig>img{height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 14%}
.lo-plate{background:rgba(246,239,234,.93);box-shadow:inset 0 0 0 1px var(--lo-clay);
 right:clamp(14px,6vw,70px)}
.lo-plate .lo-kick{color:var(--lo-bronze-d)}
.lo-plate strong{color:var(--lo-ink)}
.lo-plate p{color:var(--lo-cocoa)}
.lo-plate a{color:var(--lo-bronze-d);border-bottom-color:var(--lo-gold)}
.lo-plate a:hover{color:var(--lo-ink);border-bottom-color:var(--lo-bronze)}

/* ---- ticker: a blush band, not an espresso one --------------------------- */
.lo-tick{background:var(--lo-linen);color:var(--lo-ink);
 box-shadow:inset 0 -1px 0 var(--lo-clay)}
.lo-tick span{color:var(--lo-cocoa)}

/* ---- matcher: a linen panel ---------------------------------------------- */
.lo-match{background:var(--lo-linen)}
.lo-match::before{display:none}
.lo-match-lead .lo-kick{color:var(--lo-bronze-d)}
.lo-match-lead b{color:var(--lo-ink);font-weight:400}
.lo-field label{color:var(--lo-umber)}
.lo-field select{background-color:var(--lo-ivory);color:var(--lo-ink);
 border-color:var(--lo-clay)}
.lo-field select:hover{border-color:var(--lo-bronze)}
.lo-field select option{background:var(--lo-ivory);color:var(--lo-ink)}

/* ---- flagship: a cream stone with the photograph beside it --------------- */
.lo-flag{background:var(--lo-cream);box-shadow:inset 0 0 0 1px var(--lo-clay),var(--lo-shadow)}
.lo-flag-body .lo-kick{color:var(--lo-bronze-d)}
.lo-flag-body h3{color:var(--lo-ink);font-weight:400}
.lo-flag-body>p{color:var(--lo-cocoa)}
.lo-spec{border-top-color:var(--lo-clay)}
.lo-spec>div{border-bottom-color:var(--lo-clay)}
.lo-spec>div>span:first-child{color:var(--lo-umber)}
.lo-spec>div>span:last-child{color:var(--lo-ink)}
.lo-flag-chip{background:rgba(246,239,234,.94);color:var(--lo-ink);
 box-shadow:inset 0 0 0 1px var(--lo-clay)}

/* ---- featured: the four addresses highlighted beside the flagship -------- */
.lo-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;margin-top:26px}
.lo-feat a{display:block;text-decoration:none;color:inherit}
.lo-feat-fig{display:block;overflow:hidden;clip-path:var(--lo-stone)}
.lo-feat-fig img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
 transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.lo-feat a:hover .lo-feat-fig img{transform:scale(1.05)}
.lo-feat .lo-status{margin:14px 0 6px}
.lo-feat b{display:block;font-family:var(--lo-display);font-weight:400;font-size:21px;
 letter-spacing:-.012em;color:var(--lo-ink)}
.lo-feat small{display:block;margin-top:4px;font-size:13.5px;color:var(--lo-umber)}
.lo-feat em{display:block;margin-top:8px;font-style:normal;font-size:14px;
 font-variant-numeric:tabular-nums;color:var(--lo-bronze-d)}

/* ---- about ---------------------------------------------------------------- */
.lo-about-fig{background:linear-gradient(140deg,rgba(213,170,162,.75),
 rgba(241,220,214,.5) 48%,rgba(213,170,162,.7))}
.lo-about-fig img{aspect-ratio:4/5;object-position:50% 14%}
.lo-quote{font-style:normal;font-weight:400;color:var(--lo-ink)}

/* ---- close: a linen panel ------------------------------------------------- */
.lo-close{background:var(--lo-linen);border-top:1px solid var(--lo-clay)}
.lo-close::before{display:none}
.lo-close-in .lo-kick{color:var(--lo-bronze-d)}
.lo-close h2{color:var(--lo-ink);font-weight:400}
.lo-close>.lo-wrap>p{color:var(--lo-cocoa)}
.lo-close-alt{color:var(--lo-umber)}
.lo-close-alt a{color:var(--lo-bronze-d);border-bottom-color:var(--lo-gold)}
.lo-close-alt a:hover{color:var(--lo-ink)}

/* headings across the page take the reference's lighter serif weight */
.lo-h2,.lo-row-name,.lo-diff h3,.lo-gal figcaption b,.lo-post h3,.lo-faq summary,
.lo-rail b,.lo-plate strong{font-weight:400;font-variation-settings:'SOFT' 0,'WONK' 0}

@media (max-width:1080px){
 .lo-hero-fig{justify-self:start;max-width:440px}
 .lo-feat{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
 .lo-feat{grid-template-columns:1fr 1fr;gap:16px}
 .lo-feat b{font-size:18px}
 .lo-hero-fig{max-width:none}
}

/* hero proportions: the reference sets the headline on two lines */
@media (min-width:1081px){
 .lo-hero-in{grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr)}
 .lo-hero-copy h1{font-size:clamp(56px,5.5vw,88px)}
}
.lo-plate{right:auto;max-width:min(300px,72%);padding:15px 18px 14px}
.lo-plate strong{font-size:20px;margin:8px 0 4px}
.lo-plate .lo-kick{font-size:9.5px;letter-spacing:.16em}

/* on tablet and phone the fixed ticker + nav are 116px tall; clear them */
@media (max-width:1080px){body.lo-home .lo-hero{padding-top:150px}}

/* small figures that were taupe fell under AA on the paper */
.lo-row-n,.lo-row-price span{color:var(--lo-umber)}
.lo-field label{color:var(--lo-cocoa)}