@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-400-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-500-italic.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/cormorant-garamond-400.woff2) format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/cormorant-garamond-500.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format('woff2')}

:root{--ivory:#fcfcf9;--oat:#f4f2ec;--ink:#3d3934;--laurel:#5a6446;--mute:#5f5951;--soft:#e8e6dc;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Inter',system-ui,sans-serif}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ivory);color:var(--ink);font:400 16px/1.65 var(--sans);overflow-x:clip}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
h1,h2,h3{font-family:var(--serif);font-weight:400;margin:0 0 16px;line-height:1.12}
h2{font-size:clamp(32px,3.6vw,48px)}
h3{font-size:24px}
p{margin:0 0 16px}
ul{margin:0;padding:0}
a:focus-visible{outline:3px solid var(--ink);outline-offset:2px;box-shadow:0 0 0 6px var(--ivory)}

/* pacote */
.pular{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--ivory);padding:12px 16px;z-index:60}
.pular:focus{left:8px;top:8px}
.rascunho{background:var(--ink);color:var(--ivory);font:400 13px/1.4 var(--sans);text-align:center;padding:8px 16px}
.pacote{position:sticky;top:0;z-index:50;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;padding:0 16px;background:var(--ivory);border-bottom:1px solid #e3dfd6;overflow-x:clip}
.pacote-abas{display:flex;flex-wrap:wrap}
.pacote-abas a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font:600 13px/1 var(--sans);color:var(--ink);text-decoration:none}
.pacote-abas a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:2px}
.pacote-abas .curto{display:none}
.chat{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--ink);color:var(--ivory);font:600 13px/1 var(--sans);text-decoration:none}
.rodape{background:var(--ink);color:var(--ivory);padding:40px 24px;text-align:center;border-top:1px solid #57514a}
.rodape p{max-width:720px;margin:0 auto 12px;font-size:14px}
.rodape-chat{display:inline-flex;align-items:center;min-height:44px;color:var(--ivory);text-decoration:underline;text-underline-offset:4px}
.rodape-fontes{color:var(--soft)}
@media(max-width:640px){.pacote-abas .longo{display:none}.pacote-abas .curto{display:inline}.pacote{justify-content:center}.pacote-abas a{padding:0 7px;font-size:12px}.chat{padding:0 14px;font-size:12px}}

/* base de seção */
.s{position:relative;overflow-x:clip;padding:88px 0}
.s-oat{background-color:#f4f2ec}
.s-laurel{background-color:#5a6446;color:var(--ivory)}
.s-dark{background-color:#3d3934;color:var(--ivory)}
.s-dark p,.s-laurel p{color:var(--soft)}
.wrap,.grid-rn,.grid-rc,.grid-bw,.tri,.oak,.voices,.grid-close{max-width:1320px;margin:0 auto;padding:0 24px}
.eyebrow{font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.s-dark .eyebrow,.s-laurel .eyebrow,.hero-box .eyebrow{color:var(--soft)}
.lk{display:inline-flex;align-items:center;min-height:44px;color:inherit;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.note{font-size:15px;border-top:1px solid currentColor;padding-top:14px;margin-top:20px;max-width:60ch}
.note b{font-weight:600}
.hang{display:inline-block;background:var(--ink);color:var(--ivory);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:11px 14px;margin:0 0 20px}
.s-laurel .hang,.hang--light{background:var(--ivory);color:var(--ink)}
.btn{display:inline-flex;align-items:center;min-height:48px;padding:0 26px;background:var(--ivory);color:var(--ink);font:600 15px/1 var(--sans);text-decoration:none;margin-top:8px}
.head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:8px 40px;align-items:start;margin-bottom:40px}
.head>.hang{grid-column:1/-1;justify-self:start}
.head p{max-width:64ch}

/* revelação */
.rv{transition:opacity .7s ease,transform .7s ease}
.com-js .rv:not(.in){opacity:0;transform:translateY(16px)}
@media(prefers-reduced-motion:reduce){.com-js .rv:not(.in){opacity:1;transform:none}.rv{transition:none}html{scroll-behavior:auto}}

/* foto de fundo: hero, world, runway */
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero{min-height:920px;display:grid;place-items:center;padding:0}
#rule-basics{padding:56px 0 64px}
#ttmm{padding:48px 0}
#table-uniform{padding:72px 0 104px}
.hero-box{position:relative;background:rgba(61,57,52,.93);color:var(--ivory);max-width:640px;margin:24px;padding:36px 40px;text-align:center}
.hero-box h1{font-size:clamp(30px,4.2vw,46px);margin-bottom:14px}
.hero-box p{color:var(--soft)}
.world,.runway{min-height:720px;display:flex;align-items:center;padding:0}
.world{min-height:840px}
.runway{min-height:600px}
.box{position:relative;background:var(--ivory);color:var(--ink);max-width:600px;margin:48px 24px 48px max(24px,calc((100% - 1272px)/2));padding:36px}
.box--right{margin:48px max(24px,calc((100% - 1272px)/2)) 48px auto}
.box p{max-width:none}

/* preenchimento de coluna por foto */
.fill,.col-img,.ph,.duo figure,.tri>figure,.mosaic figure,.pair figure{position:relative;overflow:hidden}
.fill img,.col-img img,.ph img,.duo figure img,.tri>figure img,.mosaic figure img,.pair figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* rule I */
.grid-rn{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:stretch}
.txt{align-self:center}
.txt p{max-width:60ch}
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-height:620px}
.sw{list-style:none;display:flex;flex-wrap:wrap;gap:8px 20px;margin:8px 0 20px}
.sw li{display:inline-flex;align-items:center;gap:8px;font-size:14px;min-height:32px}
.dot{width:18px;height:18px;border:1px solid #bdb8ac;display:inline-block}

/* rule II */
.six{list-style:none;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:20px}
.six img{width:100%;aspect-ratio:4/5;object-fit:cover}
.six figcaption{font-size:13px;line-height:1.45;color:var(--mute);padding-top:8px}
.six figcaption b{display:block;color:var(--ink);font-weight:600}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;margin-top:40px}
.three p{margin:0;max-width:56ch}
@media(max-width:900px){.three{grid-template-columns:minmax(0,1fr);gap:16px}}
.three+.note{margin-top:32px}

/* rule III */
.grid-rc{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:56px;align-items:stretch}
.col-txt{align-self:center}
.col-txt p{max-width:60ch}
.col-img{min-height:640px}
.card-q{display:flex;gap:16px;align-items:center;background:var(--ivory);color:var(--ink);padding:12px;margin-top:28px;max-width:520px}
.card-q img{width:180px;flex:none}
.card-q figcaption{font-size:14px;line-height:1.5}

/* mule rail */
.rail{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:24px}
.rail img{width:100%;aspect-ratio:4/5;object-fit:cover}
.rail h3{font-size:24px;margin:14px 0 8px}
.rail p{font-size:13.5px;line-height:1.55;color:var(--soft);margin:0}
.head--dark p{color:var(--soft)}

/* look tags */
.head-c{max-width:720px;margin:0 auto 48px;text-align:center}
.looks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.look{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:24px;align-items:center;background:var(--oat);padding:20px}
.look img{width:100%;aspect-ratio:3/4;object-fit:cover}
.tags{list-style:none;margin:12px 0}
.tags li{font:400 22px/1.3 var(--serif);border-top:1px solid #d3cdc0;padding:10px 0}
.more{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:32px}

/* brentwood */
.grid-bw{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.sticky{position:sticky;top:96px}
.sticky p{max-width:60ch}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gal img{width:100%;aspect-ratio:3/4;object-fit:cover}
.gal figcaption{font-size:13px;line-height:1.4;color:var(--mute);padding-top:6px}

/* ttmm */
.tri{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);gap:0;align-items:stretch;padding:0 24px}
.tri>figure{min-height:560px}
.mid{padding:32px 44px;text-align:center;align-self:center}
.mid p{max-width:52ch;margin-left:auto;margin-right:auto}
.thumbs{display:grid;grid-template-columns:repeat(2,100px);justify-content:center;gap:16px;margin:20px 0 8px}
.thumbs img{width:100px;aspect-ratio:4/5;object-fit:cover}
.thumbs figcaption{font-size:12px;line-height:1.3;color:var(--mute);padding-top:4px}

/* oak */
.oak{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.span2{grid-column:span 2}
.oak-txt{align-self:center;padding:8px 32px 8px 0}
.oak-txt p{max-width:62ch}
.ph{min-height:340px}
.ph figcaption{position:absolute;left:0;bottom:0;background:var(--ivory);color:var(--ink);font-size:13px;padding:6px 12px}

/* voices */
.voices{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:stretch}
.quotes{display:grid;gap:28px;align-content:start}
blockquote{margin:0;border-left:2px solid var(--ink);padding-left:20px}
blockquote p{font:italic 400 22px/1.4 var(--serif);margin:0 0 8px;max-width:60ch}
blockquote footer{font-size:14px;color:var(--mute)}
.eef ul{padding-left:20px;margin:8px 0 0}
.eef li{margin-bottom:6px}
.mosaic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:16px;min-height:640px}

/* table */
.essay{columns:2;column-gap:56px}
.essay h3{break-after:avoid;margin:0 0 8px}
.essay p{break-inside:avoid-column}
.coast{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:32px;align-items:center;background:var(--ivory);padding:20px;margin-top:40px}
.coast img{width:100%;aspect-ratio:4/5;object-fit:cover}
.coast p{margin:0;max-width:70ch}

/* fechamento */
.grid-close{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:stretch}
.close-txt{align-self:center}
.close-txt p{max-width:60ch}
.pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;min-height:640px}

/* responsivo */
@media(max-width:1100px){
  .six{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rail{grid-template-columns:minmax(0,1fr);gap:32px}
  .rail figure{display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr);gap:24px;align-items:start}
  .rail h3{margin-top:0}
  .gal{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:900px){
  .s{padding:56px 0}
  .grid-rn,.grid-rc,.grid-bw,.voices,.grid-close{grid-template-columns:minmax(0,1fr);gap:32px}
  .duo,.mosaic,.pair{min-height:0}
  .duo figure,.pair figure{aspect-ratio:3/4}
  .mosaic{grid-template-rows:none}
  .mosaic figure{aspect-ratio:1/1}
  .col-img{min-height:0;aspect-ratio:4/5;max-width:560px}
  .sticky{position:static}
  .head{grid-template-columns:minmax(0,1fr)}
  .tri{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .tri>figure{min-height:0;aspect-ratio:3/4}
  .mid{grid-column:1/-1;order:-1;padding:0 0 16px}
  .oak{grid-template-columns:repeat(2,minmax(0,1fr))}
  .oak-txt{padding:0}
  .ph{min-height:0;aspect-ratio:4/5}
  .ph.span2{aspect-ratio:16/9}
  .looks,.more{grid-template-columns:minmax(0,1fr)}
  .essay{columns:1}
  .world,.runway{min-height:0;padding:0}
  .world .bg,.runway .bg{position:relative;height:320px}
  .world,.runway{display:block}
  .box,.box--right{margin:0;max-width:none;padding:28px 24px}
  .hero{min-height:640px}
}
@media(max-width:560px){
  .look{grid-template-columns:minmax(0,1fr)}
  .look img{max-width:260px}
  .rail figure{grid-template-columns:minmax(0,1fr)}
  .coast{grid-template-columns:minmax(0,1fr)}
  .coast img{max-width:220px}
  .card-q{flex-direction:column;align-items:flex-start}
  .hero-box{padding:28px 22px}
  .sw{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px}
  .rail img{aspect-ratio:1/1;object-position:center top}
}