/* Blundstone brand page. Same shell and type as the information pages (shipping, about):
   paper ground, Karantina display, Secular One text, sand hairlines, brand blue for anything
   actionable. The side index, title rise and scroll reveal are the shared site-motion ones.
   The shop's product cutouts were shot on one flat sand (#F0ECE3), so --brand-tile is mixed to
   match it and a photo and its tile read as one square. Cutouts are never cropped. */
.brand-layout{--brand-tile:color-mix(in srgb,var(--color-sand-300) 11%,var(--paper-background));--brand-quiet:#625f58;max-width:1240px;width:100%;min-width:0;margin:0 auto;padding:24px 40px 65px}
.brand-note{font-size:12px;color:var(--brand-quiet);margin:0 0 30px}

/* Hero */
.brand-hero{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center;padding:14px 0 54px}
/* The first line ("בלנסטון (Blundstone):") is about 5.8 times the font size wide. The size is capped so that
   line always fits its column: the column stops growing at 1240px, so the title must stop growing too. */
.brand-hero h1{font:700 clamp(44px,6.6vw,96px)/.96 var(--f-display);margin:0 0 26px;text-wrap:initial}
.brand-hero h1 [lang="en"]{font-size:.6em;letter-spacing:.01em;margin-left:.1em}
.brand-keep{white-space:nowrap}
.brand-lead{font-size:19px;line-height:1.75;max-width:540px;margin:0 0 18px}
.brand-text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-primary);text-underline-offset:5px;font-size:15px}
.brand-hero-art{margin:0}
.brand-hero-art img{display:block;width:100%;height:auto;max-height:600px;aspect-ratio:5/6;object-fit:cover;object-position:50% 70%;border-radius:6px}
.brand-layout figcaption{font-size:12px;color:var(--brand-quiet);margin:12px 0 0}

/* Side index + content, as on the shipping page */
.brand-grid{display:grid;grid-template-columns:200px minmax(0,1fr);gap:65px;border-top:1px solid var(--color-rule)}
.brand-nav{display:flex;flex-direction:column;align-items:start;gap:0;position:sticky;top:100px;align-self:start;padding-top:30px}
.brand-nav a{display:block;padding:11px 0;text-decoration:none;font-size:15px;transition:color var(--motion-feedback) var(--ease-out)}
.brand-nav a:hover,.brand-nav a[aria-current="location"]{color:var(--color-primary)}
.brand-content{min-width:0}
.brand-content>section{scroll-margin-top:105px;padding:44px 0 50px}
.brand-content>section+section{border-top:1px solid var(--color-rule)}
.brand-content h2{font:700 46px/1.05 var(--f-display);margin:0 0 16px}
.brand-content p{line-height:1.8}
.brand-content a:not(.submit,.brand-text-link){color:var(--color-primary);text-underline-offset:4px}

/* The four models */
.brand-intro{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:center;margin-bottom:38px}
.brand-section-lead{font-size:17px;margin:0;max-width:520px}
.brand-detail{margin:0}
.brand-detail img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:50% 40%;border-radius:6px}
.brand-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.brand-card{position:relative;display:flex;flex-direction:column}
.brand-card-image{display:block;aspect-ratio:1;border-radius:8px;overflow:hidden;background:var(--brand-tile)}
.brand-card-image img{display:block;width:100%;height:100%;object-fit:contain;transition:transform .35s var(--ease-out)}
@media(hover:hover){.brand-card:hover .brand-card-image img{transform:scale(1.035)}}
.brand-card-body{display:flex;flex-direction:column;align-items:start;flex:1;padding-top:14px}
.brand-card h3{margin:0 0 10px;font-weight:400;line-height:1}
.brand-content .brand-card h3 a{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--color-foreground);transition:color var(--motion-feedback) var(--ease-out)}
.brand-content .brand-card h3 a:hover{color:var(--color-primary)}
.brand-card h3 span{font-size:16px}
.brand-card h3 b{font:400 46px/1 'Anton SC',sans-serif;direction:ltr}
/* The one safety model is flagged on its photo, so the four descriptions start on one line. */
.brand-card-flag{position:absolute;top:8px;inset-inline-start:8px;margin:0;padding:3px 9px;border-radius:999px;background:var(--color-primary);color:var(--color-primary-foreground);font-size:11px;line-height:1.45;pointer-events:none}
.brand-card-body p:not(.brand-card-flag){font-size:14px;line-height:1.75;margin:0 0 6px;color:var(--color-muted-foreground)}
.brand-card-body .brand-text-link{margin-top:auto;font-size:14px}

/* How to choose */
.brand-choose-top{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;margin-bottom:44px}
.brand-worn{margin:0}
.brand-worn img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 100%;border-radius:6px}
.brand-steps{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:26px}
.brand-steps li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;padding-top:20px;border-top:1px solid var(--color-rule)}
.brand-step-number{font:400 21px/1.3 'Anton SC',sans-serif;color:var(--color-marker);direction:ltr}
.brand-steps h3{font-size:19px;font-weight:400;line-height:1.4;margin:0 0 8px}
.brand-steps p{font-size:15px;margin:0;color:var(--color-muted-foreground)}
.brand-table{border:1px solid var(--color-rule);border-radius:8px;overflow:hidden}
.brand-table table{width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:14px;text-align:start}
.brand-table caption{caption-side:top;text-align:start;font-size:19px;line-height:1.4;padding:16px 18px 14px;border-bottom:1px solid var(--color-rule)}
.brand-table th,.brand-table td{padding:15px 18px;border-bottom:1px solid var(--color-rule);vertical-align:top;font-weight:400;line-height:1.65;text-align:start}
.brand-table thead th{background:var(--brand-tile);font:400 26px/1 'Anton SC',sans-serif;padding-block:13px 11px}
.brand-table thead th:first-child{width:128px}
.brand-table tbody th{color:var(--color-primary);font-size:14px}
.brand-table tbody td{color:var(--color-muted-foreground)}
.brand-table tbody tr:last-child :is(td,th){border-bottom:0}
.brand-table :is(td,th)+:is(td,th){border-inline-start:1px solid var(--color-rule-faint)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sizes. The insole was shot on white: multiplied onto its own sand tile it sits like the other cutouts
   (the tile carries the background itself, because body is an isolated group and would blend with nothing). */
.brand-sizes{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:center}
.brand-sizes p{font-size:16px;margin:0 0 16px;max-width:560px}
.brand-sizes p:last-child{margin-bottom:0}
.brand-insole{margin:0}
.brand-insole-tile{display:block;padding:18px 14px;border-radius:8px;background:var(--brand-tile);isolation:isolate}
.brand-insole img{display:block;width:100%;height:auto;mix-blend-mode:multiply}

/* Ordering, delivery, pickup */
.brand-order-text{display:grid;grid-template-columns:1fr 1fr;gap:40px}
.brand-order-text p{font-size:15px;margin:0}
.brand-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;margin:34px 0 0;padding:26px 0 0;border-top:1px solid var(--color-rule)}
.brand-facts div{display:grid;gap:4px;align-content:start}
.brand-facts dt{font-size:13px;color:var(--brand-quiet)}
.brand-facts dd{margin:0;font-size:13px;color:var(--brand-quiet);line-height:1.6}
.brand-facts b{display:block;font:700 44px/1.1 var(--f-display);color:var(--color-foreground);margin-bottom:2px}

/* Questions */
.brand-faq h2{margin-bottom:8px}
.brand-faq details{border-bottom:1px solid var(--color-rule)}
.brand-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:20px 0;font-size:17px}
.brand-faq summary::-webkit-details-marker{display:none}
.brand-faq summary:after{content:'+';color:var(--color-primary);font-size:25px;line-height:1}
.brand-faq details[open] summary:after{content:'−'}
.brand-faq details p{margin:0 0 22px;font-size:15px;max-width:620px;color:var(--color-muted-foreground)}
.brand-content>.brand-faq{padding-bottom:44px}

/* More work shoes: the closing call to action */
.brand-content>.brand-more{display:flex;align-items:center;justify-content:space-between;gap:40px;padding:36px;border:0;border-radius:12px;background:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background))}
.brand-more h2{font-size:54px;margin:0 0 10px}
.brand-more p{font-size:16px;margin:0;max-width:520px}
.brand-actions{display:flex;flex-direction:column;align-items:center;gap:8px;flex-shrink:0}
.blundstone-page .brand-actions .submit{width:auto;min-height:54px;margin:0;padding:15px 30px;gap:14px;font-size:16px;text-decoration:none;white-space:nowrap}
.brand-actions .brand-text-link{font-size:14px}
.blundstone-page :is(a,summary):focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

@media(max-width:1100px){
  .brand-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 24px}
  :is(.brand-intro,.brand-choose-top,.brand-sizes){grid-template-columns:minmax(0,1fr) 240px;gap:40px}
}
/* Under 1000px the side index still takes its column, so a photo beside the text would squeeze it: they stack. */
@media(max-width:1000px){
  :is(.brand-intro,.brand-choose-top,.brand-sizes){grid-template-columns:minmax(0,1fr);gap:26px}
  :is(.brand-detail,.brand-worn,.brand-insole){max-width:440px}
  :is(.brand-detail,.brand-worn) img{aspect-ratio:16/10}
  .brand-worn img{object-position:50% 88%}
  .brand-facts{grid-template-columns:1fr 1fr;gap:26px 28px}
  .brand-content>.brand-more{flex-direction:column;align-items:flex-start;gap:24px}
  .brand-actions{align-items:flex-start}
  /* The comparison as four short lists, one per row of the table. */
  .brand-table{border:0;border-radius:0;overflow:visible}
  .brand-table :is(table,tbody,tr,th,td,caption){display:block}
  .brand-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .brand-table caption{padding:0 0 14px;border-bottom:0}
  .brand-table tr{padding:16px 0 10px;border-top:1px solid var(--color-rule)}
  .brand-table tbody th{padding:0 0 6px;border:0;font-size:15px}
  .brand-table tbody td{position:relative;padding:6px 0;padding-inline-start:62px;border:0}
  .brand-table tbody td::before{content:attr(data-model);position:absolute;inset-inline-start:0;top:5px;font:400 20px/1.2 'Anton SC',sans-serif;color:var(--color-foreground)}
  .brand-table :is(td,th)+:is(td,th){border-inline-start:0}
}
@media(max-width:800px){
  .brand-grid{grid-template-columns:155px minmax(0,1fr);gap:30px}
  .brand-hero{gap:30px}
  .brand-order-text{grid-template-columns:1fr;gap:14px}
}
@media(max-width:600px){
  .brand-layout{padding:16px 16px 48px}
  .brand-note{margin-bottom:22px}
  .brand-hero{display:block;padding:8px 0 30px}
  .brand-hero h1{font-size:clamp(46px,13.4vw,60px);margin-bottom:20px}
  .brand-lead{font-size:16px;line-height:1.7;margin-bottom:10px}
  .brand-hero-art{margin-top:22px}
  .brand-hero-art img{aspect-ratio:4/5;max-height:none}
  .brand-grid{display:block}
  .brand-nav{position:static;display:flex;flex-direction:row;flex-wrap:wrap;gap:2px 20px;padding:8px 0 12px}
  .brand-nav a{font-size:13px;min-height:44px;display:flex;align-items:center;padding:0;text-decoration:underline}
  .brand-nav .motion-spy{display:none}
  .brand-content>section{scroll-margin-top:84px;padding:32px 0 36px}
  .brand-content>.brand-models{padding-top:20px;border-top:1px solid var(--color-rule)}
  .brand-content h2{font-size:40px;margin-bottom:14px}
  :is(.brand-detail,.brand-worn,.brand-insole){max-width:none}
  .brand-intro{gap:22px;margin-bottom:28px}
  .brand-section-lead{font-size:15px}
  .brand-cards{grid-template-columns:1fr;gap:0}
  .brand-card{display:grid;grid-template-columns:128px minmax(0,1fr);gap:16px;align-items:start;padding:20px 0;border-top:1px solid var(--color-rule)}
  .brand-card:last-child{padding-bottom:0}
  .brand-card-body{padding-top:0}
  .brand-card h3{margin-bottom:8px}
  .brand-card h3 b{font-size:40px}
  .brand-card-flag{position:static;margin:0 0 8px;padding:4px 11px;font-size:12px}
  .brand-choose-top{gap:24px;margin-bottom:32px}
  .brand-steps{margin:4px 0 0;gap:22px}
  .brand-steps li{padding-top:16px}
  .brand-steps h3{font-size:18px}
  .brand-steps p{font-size:14px}
  .brand-table caption{font-size:18px}
  .brand-table tbody td{font-size:14px;padding-inline-start:58px}
  .brand-sizes{gap:22px}
  .brand-sizes p{font-size:15px}
  .brand-order-text p{font-size:14px}
  .brand-facts{gap:22px 16px;margin-top:26px;padding-top:22px}
  .brand-facts b{font-size:38px}
  .brand-faq summary{font-size:16px;padding:18px 0}
  .brand-faq details p{font-size:14px}
  .brand-content>.brand-faq{padding-bottom:32px}
  .brand-content>.brand-more{padding:24px 20px 22px;gap:20px}
  .brand-more h2{font-size:46px}
  .brand-more p{font-size:15px}
  .brand-actions{width:100%;align-items:stretch}
  .blundstone-page .brand-actions .submit{width:100%;font-size:15px;padding:14px 18px}
  .brand-actions .brand-text-link{justify-content:center}
}
@media(prefers-reduced-motion:reduce){.brand-card-image img,.brand-nav a{transition:none}}