/* 1rem = 10 design px. The broadsheet is drawn at 870 design px and scales
   with the window like a printed page, capped so it never exceeds 1750px. */
/* Trial build of GT Pressura Mono: its ! : ; ? _ are dummy copies of . , - and it lacks $ / ' ( ) & @ ©,
   so it only draws letters, digits and . , - and everything else falls back to JetBrains Mono.
   Drop the unicode-range once the licensed font is in. */
@font-face{font-family:'GT Pressura Mono';src:url(fonts/GT-Pressura-Mono-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0020,U+002C-002E,U+0030-0039,U+0041-005A,U+0061-007A,U+00C0-017F}
html{font-size:min(calc(100vw / 90.6), 20px)}
:root{
  --paper:#F2F0EE; --ink:#231F20; --ink-2:#3A3A3A; --blue:#26498D;
  --rule:#2A2A2A; --rule-dashed:#555555; --line:2px;
  --serif:'Crimson Pro', Georgia, serif;
  --mono:'GT Pressura Mono','JetBrains Mono', ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border-radius:0;box-shadow:none}
html{-webkit-text-size-adjust:100%}
body{background:var(--paper) url(img/paper.jpg) 0 0 / 300px 300px;color:var(--ink);
  font-family:var(--mono);font-size:max(1.1rem,11px);line-height:1.42;letter-spacing:-.02em}
a{color:inherit;text-decoration:none;transition:color .2s}
a:active{opacity:.8}
:focus-visible{outline:1px solid currentColor;outline-offset:2px}

.sheet{width:min(87rem, 100% - 3.6rem);margin:1.8rem auto;border:var(--line) solid var(--rule);background:var(--paper) url(img/paper.jpg) 0 0 / 300px 300px}

/* No GT Pressura Mono Bold yet: thicken the Regular for bold text. Delete when the Bold file is in. */
b,strong,dt,.label,nav a,.wordmark,.subtitle,.markets,.step-no,.addr,.line-group{-webkit-text-stroke:.03em currentColor}

/* engravings are alpha masks painted in currentColor, so they turn blue with their story */
.art{display:block;background-color:currentColor;
  -webkit-mask:var(--src) center / contain no-repeat;mask:var(--src) center / contain no-repeat;
  transition:background-color .35s}
.art-salmon{--src:url(img/salmon.webp);aspect-ratio:1600/574}
.art-compass{--src:url(img/compass.webp);aspect-ratio:800/844}
.art-phone{--src:url(img/phone.webp);aspect-ratio:600/919}
.art-octopus{--src:url(img/octopus.webp);aspect-ratio:1000/1102}
.art-fisher{--src:url(img/fisherman.webp);aspect-ratio:900/846}
.art-crab{--src:url(img/crab.webp);aspect-ratio:900/668}
.art-lingcod{--src:url(img/lingcod.webp);aspect-ratio:1400/501}
.art-fillet{--src:url(img/fillet.webp);aspect-ratio:1200/660}
.art-crab2{--src:url(img/crab2.webp);aspect-ratio:1000/755}
.art-prawn{--src:url(img/prawn.webp);aspect-ratio:1400/636}
.art-oysters{--src:url(img/oysters.webp);aspect-ratio:1100/663}
.art-seastar{--src:url(img/seastar.webp);aspect-ratio:800/764}
.art-herring{--src:url(img/herring.webp);aspect-ratio:1600/532}
.art-wharf{--src:url(img/wharf.webp);aspect-ratio:2000/831}
.art-rowboat{--src:url(img/rowboat.webp);aspect-ratio:1200/710}

/* hover: the whole story turns blue ink */
.hot{transition:color .2s}
@media (hover:hover){ .hot:hover{color:var(--blue)} }

/* ---------- masthead ---------- */
.masthead{display:grid;grid-template-columns:14rem 1fr 14rem;border-bottom:var(--line) solid var(--rule)}
.masthead > *{border-right:var(--line) solid var(--rule)}
.masthead > :last-child{border-right:0}
.logo{display:flex;align-items:center;justify-content:center;padding:1.4rem 1.6rem}
.logo svg{width:100%;height:auto}
.title{display:block;text-align:center;padding:1.3rem 1.6rem 1.5rem}
.dateline{font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.wordmark{font-family:var(--mono);font-weight:800;text-transform:uppercase;letter-spacing:.07em;line-height:1}
.title .wordmark{font-size:5.6rem;margin:.6rem 0 .8rem;padding-left:.1em}
.subtitle{font-size:1.45rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.markets{display:flex;flex-direction:column;justify-content:center;gap:1.4rem;text-align:center;
  font-size:1.2rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em;line-height:1.3;padding:1.2rem}

/* ---------- nav with a hand-drawn marker ring ---------- */
nav{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:var(--line) solid var(--rule)}
nav a{position:relative;border-right:var(--line) solid var(--rule);text-align:center;padding:.9rem .6rem;
  font-size:1.25rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
nav a:last-child{border-right:0}
nav a span{position:relative;display:inline-block}
.ring{position:absolute;left:50%;top:50%;width:calc(100% + 7.2rem);height:5.8rem;
  transform:translate(-46%,-52%);overflow:visible;pointer-events:none;mix-blend-mode:multiply}
.ring path{fill:none;stroke:var(--blue);stroke-width:14;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1;stroke-dashoffset:1;opacity:0;
  transition:opacity .15s ease-out, stroke-dashoffset 0s linear .15s}
nav a[aria-current="page"],nav a:hover{color:var(--blue);z-index:2}
nav a[aria-current="page"] .ring path,nav a:hover .ring path{opacity:1;stroke-dashoffset:0;
  transition:opacity 0s, stroke-dashoffset .5s cubic-bezier(.55,.1,.35,1) .05s}

/* ---------- shared cell type ---------- */
.row{display:grid;border-bottom:var(--line) solid var(--rule)}
.row > *{border-right:var(--line) solid var(--rule)}
.row > :last-child{border-right:0}
.cell{padding:2.2rem}
h1,h2,h3{font-family:var(--serif);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;line-height:.84}
h1{font-size:6.2rem} h2{font-size:5rem} h3{font-size:4.5rem} .box h3{font-size:3.2rem}
.kicker{font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;margin-top:.9rem}
.body{color:var(--ink-2);transition:color .2s}
.hot:hover .body{color:inherit}
.jump{display:block;text-align:right;font-size:1.05rem;margin-top:1.2rem}
.label{font-weight:700;text-transform:uppercase;letter-spacing:.02em}

/* dashed clipping boxes */
.box-cell{padding:2rem}
.box{position:relative;border:3px solid transparent;border-image:url(img/dash.svg) 32 / 1.25rem / 0 round;padding:2rem;text-align:center;height:100%;
  font-size:max(1.15rem,11px);text-transform:uppercase;letter-spacing:.02em;line-height:1.5}
.box h3{margin-bottom:1.2rem}
/* the clipping box's dashes turn blue with its story (seaharvest.net.au: .card-special-border:after, opacity .2s) */
.box::after{content:"";position:absolute;inset:-3px;border:3px solid transparent;border-image:url(img/dash-blue.svg) 32 / 1.25rem / 0 round;opacity:0;transition:opacity .2s;pointer-events:none}
@media (hover:hover){ .hot:hover .box::after{opacity:1} }

/* ---------- home intro (seaharvest.net.au homepage-anim, read from its bundle):
   the paper starts 10vh low at 95% on marker blue, waits 1.2s, then rises and settles in 1.4s
   cubic-bezier(.4,0,.2,1) (opacity in .35s); the blue fades out over .3s at 75% of the move. */
html.intro{overflow:hidden;max-height:100vh}
html.intro body::before{content:"";position:fixed;inset:0;background:#26498D;z-index:-1;transition:opacity .3s linear}
html.intro.fade body::before{opacity:0}
html.intro .sheet{opacity:0;transform:translate3d(0,10vh,0) scale(.95);transform-origin:top center;will-change:transform}
html.intro.go .sheet{opacity:1;transform:none;transition:transform 1.4s cubic-bezier(.4,0,.2,1),opacity .35s}


/* ---------- row 1: lead story / find us ---------- */
.r1{grid-template-columns:2fr 1fr}
.lead{display:flex;flex-direction:column}
.lead .art-salmon{width:calc(100% - 1.2rem);margin:3.4rem 0 3.6rem 1.2rem}
.findus .art-compass{width:17rem;margin:0 auto 2.2rem}
.findus address{font-style:normal}
.findus address + address{margin-top:1.4rem}

/* ---------- row 2: get in touch / off the boat ---------- */
.r2{grid-template-columns:1fr 3fr}
.touch .art-phone{width:10.8rem;margin:0 auto 2.6rem}
.touch h3{margin-bottom:2.2rem}
.touch dt{font-weight:700}
.touch dd + dt{margin-top:1.4rem}
.boat{position:relative}
.boat h2{max-width:34rem}
.boat .cols{columns:2;column-gap:1.8rem;margin-top:1.4rem;margin-right:29.5rem}
.boat .art-octopus{position:absolute;right:1.4rem;top:1.6rem;width:27.5rem}

/* ---------- row 3: story / tips / crab of the week ---------- */
.r3{grid-template-columns:repeat(3,1fr);grid-template-areas:"story tips fresh" "blank tips mark"}
.r3 > *{border-right:0}
.story{grid-area:story;border-right:var(--line) solid var(--rule)!important;border-bottom:var(--line) solid var(--rule)}
.tips{grid-area:tips;border-right:var(--line) solid var(--rule)!important;display:flex;flex-direction:column}
.gerald{grid-area:fresh;border-bottom:var(--line) solid var(--rule);text-align:center}
.blank{grid-area:blank;border-right:var(--line) solid var(--rule)!important;min-height:7.2rem}
.mark{grid-area:mark;display:flex;align-items:center;justify-content:center;padding:1.8rem 1.6rem}
.mark .wordmark{font-size:2.9rem}
.story .emblem{display:block;width:100%;height:auto;margin:2.8rem 0 2.6rem}
.tips .art-fisher{width:100%;margin:auto 0 2rem}
.gerald .art-crab{width:25.2rem;max-width:100%;margin:3.2rem auto 2.8rem}
.gerald .body{text-align:left}

/* ---------- footer ---------- */
footer{display:grid;grid-template-columns:repeat(3,auto);
  font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em;text-align:center}
footer > *{padding:.9rem 1rem;border-right:var(--line) solid var(--rule)}
footer > :last-child{border-right:0}

/* ================= inner pages ================= */
.r-2{grid-template-columns:1fr 1fr}
.r-3{grid-template-columns:repeat(3,1fr)}
.contacts{display:flex;justify-content:center;gap:3.2rem;text-align:center;
  font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;margin-top:1.8rem}
.contacts dt{font-weight:700}
.contacts dd{margin-top:.3rem}
.small{font-size:1.05rem;text-transform:uppercase;letter-spacing:.02em}

/* ---------- the catch ---------- */
.product{display:flex;flex-direction:column;align-items:center;text-align:center;min-height:42rem;padding-bottom:3.2rem}
.r-2 .product h2{font-size:6rem}
.r-3 .product h2{font-size:4.6rem}
.product .art{margin:auto;padding-top:2.6rem}
.r-2 .product .art{width:88%}
.r-3 .product .art{width:92%}
.r-3 .product .art-crab2{width:80%}

/* ---------- shared "special request" row ---------- */
.request-inner{display:grid;grid-template-columns:1.15fr .75fr 1.7fr;align-items:center;gap:2rem;padding:3rem 2.2rem}
.request h2{font-size:5.6rem}
.request .art-seastar{width:100%;max-width:19rem;margin:0 auto}
.request-contact{text-align:center}

/* ---------- contact ---------- */
.loc h1{font-size:5.6rem}
.map{position:relative;display:block;aspect-ratio:16/9;margin:2rem 0 1.2rem;border:var(--line) solid var(--rule);overflow:hidden;background:var(--paper)}
.map img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply}
.credit{font-size:.95rem;color:var(--ink-2);text-align:right;margin:-.8rem 0 1rem}
.map-x{position:absolute;left:50%;top:50%;width:3.6rem;height:3.6rem;transform:translate(-50%,-50%);
  fill:none;stroke:var(--blue);stroke-width:4.5;stroke-linecap:round}
.addr{font-weight:700}
.hours-title{margin-top:1rem}
.hours{display:grid;grid-template-columns:8rem 1fr;row-gap:.1rem;margin-top:1rem}
.hours-note{margin-top:1.4rem}
.touch-inner{display:grid;grid-template-columns:1fr 2fr;align-items:center;gap:2rem;padding:3rem 2.2rem;text-align:center}
.touch-inner .art-phone{width:14rem;margin:0 auto}
.touch-inner h2{font-size:6rem}
.comic{margin:0}
.comic img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.08);transition:filter .9s}
@media (hover:hover){ .comic:hover img{filter:none} }
@media (hover:none){ .comic img{filter:none} }

/* ---------- order ---------- */
.order-hero{display:grid;grid-template-columns:1fr 1.15fr;align-items:center;gap:3rem}
.order-hero .body{margin-top:2rem;max-width:40rem}
.step-head{display:flex;align-items:baseline;gap:1.2rem;padding:0}
.cell.step-head{padding:2.2rem}
.step-no{font-size:1.05rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.step-head h2{font-size:4.4rem}
.catalogue{display:block}
.catalogue > *{border-right:0}
.line{display:grid;grid-template-columns:1fr 20rem 19rem;align-items:center;min-height:4.6rem;
  border-bottom:1px solid rgba(35,31,32,.28);font-size:1.15rem;text-transform:uppercase;letter-spacing:.02em}
.line > *{padding:.8rem 2.2rem}
.line > * + *{border-left:1px solid rgba(35,31,32,.28);align-self:stretch;display:flex;align-items:center}
.line-head{font-size:1.05rem;min-height:3.6rem;color:var(--ink-2)}
.line-group{font-family:var(--mono);font-weight:700;font-size:1.15rem;letter-spacing:.02em;line-height:1.4;
  padding:1.6rem 2.2rem .8rem;border-bottom:1px solid rgba(35,31,32,.28);scroll-margin-top:2rem}
.line-note{color:var(--ink-2);margin-left:.8rem;font-size:.95rem}
.line-note::before{content:"- "}
.qty{gap:.4rem}
.qty-btn,.qty input{font:inherit;color:inherit;background:transparent;border:var(--line) solid var(--rule);height:2.8rem}
.qty-btn{width:2.8rem;cursor:pointer;line-height:1}
.qty-btn:hover{color:var(--blue);border-color:var(--blue)}
.qty input{width:5.6rem;text-align:center;-moz-appearance:textfield}
.qty input::-webkit-inner-spin-button,.qty input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.unit{margin-left:.6rem}
.line-price{gap:1rem}
.per{color:var(--ink-2)}
.line.picked{color:var(--blue)}
.line.picked .per{color:inherit}
.line-off{color:var(--ink-2)}
.line-off .line-name{text-decoration:line-through}
.pick{position:relative;display:flex;gap:1.4rem;align-items:flex-start;margin-top:2.2rem;cursor:pointer;
  font-size:1.2rem;text-transform:uppercase;letter-spacing:.02em;line-height:1.5}
.pick input{appearance:none;flex:none;width:2.2rem;height:2.2rem;border:var(--line) solid var(--rule);border-radius:50%;margin-top:.1rem;display:grid;place-content:center}
.pick input::after{content:"";width:1.1rem;height:1.1rem;border-radius:50%;background:var(--blue);transform:scale(0);transition:transform .15s}
.pick input:checked::after{transform:scale(1)}
.pick input:checked + span{color:var(--blue)}
.summary{height:auto;text-align:left;margin-top:2rem;text-transform:none;letter-spacing:0;font-size:1.15rem}
.summary .label{margin-bottom:.6rem;text-transform:uppercase}
.total{display:flex;justify-content:space-between;align-items:baseline;margin-top:2rem}
.total #total{font-family:var(--serif);font-weight:800;font-size:4.4rem;line-height:1}
.call{display:block;margin-top:1.6rem;padding:1.2rem;border:var(--line) solid currentColor;text-align:center;
  font-family:var(--serif);font-weight:800;font-size:3rem;text-transform:uppercase;line-height:1}
.phone-in .small{margin-top:1rem;color:var(--ink-2)}

/* ---------- about ---------- */
.feature-head{text-align:center}
.feature-head h1{font-size:9.6rem;margin-top:1.2rem;text-wrap:balance}
.dek{font-size:1.3rem;text-transform:uppercase;letter-spacing:.02em;margin-top:1.2rem}
.feature-head .art-wharf{width:94%;margin:3rem auto .6rem}
.feature-row{grid-template-columns:2fr 1fr}
.feature-cols{columns:2;column-gap:2.4rem}
.feature-cols p + p{margin-top:1rem}
.dropcap::first-letter{float:left;font-family:var(--serif);font-weight:800;font-size:6.4rem;line-height:.78;margin:.4rem .8rem 0 0}
.quote .art-rowboat{width:82%;margin:0 auto 2rem}
.quote blockquote p{font-family:var(--serif);font-weight:800;font-size:2.3rem;line-height:1;text-transform:uppercase;letter-spacing:-.01em}
.quote blockquote footer{display:block;margin-top:1.2rem;font-size:1.05rem}
.list{list-style:none;margin-top:1.8rem}
.list li{padding:.5rem 0;border-bottom:1px solid rgba(35,31,32,.28)}
.list li:first-child{border-top:1px solid rgba(35,31,32,.28)}
.roster{margin-top:1.8rem}
.roster dt{font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.roster dd{color:var(--ink-2);margin-bottom:1.2rem}
.hot:hover .roster dd{color:inherit}

@media (prefers-reduced-motion:reduce){
  *,.ring path{transition:none!important}
}

/* ---------- narrow screens: stack the broadsheet ---------- */
@media (max-width:760px){
  html{font-size:10px}
  body{font-size:12px}
  .sheet{width:auto;margin:16px}
  .masthead{grid-template-columns:9.6rem 1fr}
  .masthead .markets{grid-column:1 / -1;flex-direction:row;justify-content:center;gap:2.4rem;
    border-top:var(--line) solid var(--rule);border-right:0;padding:1rem}
  .masthead .title{border-right:0}
  .title{padding:1.2rem .8rem 1.4rem}
  .title .wordmark{font-size:clamp(22px,6.6vw,44px);letter-spacing:.05em}
  .subtitle{font-size:clamp(9.5px,2.75vw,12px);letter-spacing:.02em}
  .logo{padding:1.2rem}
  nav{grid-template-columns:repeat(2,1fr)}
  nav a{font-size:12px;padding:1.1rem .6rem}
  nav a:nth-child(2){border-right:0}
  nav a:nth-child(-n+2){border-bottom:var(--line) solid var(--rule)}
  .r1,.r2{grid-template-columns:1fr}
  .row > *{border-right:0;border-bottom:var(--line) solid var(--rule)}
  .row > :last-child{border-bottom:0}
  .r2 .boat{order:-1}
  h1{font-size:clamp(42px,12vw,62px)} h2{font-size:clamp(36px,10vw,50px)} h3{font-size:clamp(36px,10vw,45px)}
  .kicker,.jump{font-size:11px}
  .boat .art-octopus{position:static;width:22rem;margin:2rem auto 0}
  .boat .cols{columns:1;margin-right:0}
  .box{font-size:12px}
  .r3{grid-template-columns:1fr;grid-template-areas:"story" "tips" "fresh" "mark"}
  .story,.tips{border-right:0!important;border-bottom:var(--line) solid var(--rule)}
  .blank{display:none}
  .tips .art-fisher{max-width:32rem;margin:0 auto 2rem}
  footer{grid-template-columns:1fr;font-size:11px}
  footer > *{border-right:0;border-bottom:var(--line) solid var(--rule)}
  footer > :last-child{border-bottom:0}
}

/* ---------- inner pages on narrow screens ---------- */
@media (max-width:760px){
  .r-2,.r-3,.feature-row{grid-template-columns:1fr}
  .product{min-height:0}
  .r-2 .product h2,.r-3 .product h2{font-size:clamp(36px,10vw,50px)}
  .request-inner,.touch-inner,.order-hero{grid-template-columns:1fr;text-align:center}
  .request h2,.touch-inner h2,.loc h1{font-size:clamp(36px,10vw,50px)}
  .request .art-seastar{max-width:16rem}
  .contacts{gap:1.6rem;font-size:11px;flex-wrap:wrap}
  .order-hero .body{margin:1.6rem auto 0}
  .step-head h2{font-size:clamp(30px,8.5vw,44px)}
  .step-head{flex-wrap:wrap}
  .line{grid-template-columns:1fr auto;font-size:11px}
  .line-head{display:none}
  .line > *{padding:.8rem 1.4rem}
  .line-name{grid-column:1 / -1}
  .line > * + *{border-left:0}
  .line-price{justify-content:flex-end}
  .line-group{font-size:12px;padding:1.4rem 1.4rem .6rem}
  .total #total{font-size:36px}
  .call{font-size:26px}
  .feature-head h1{font-size:clamp(44px,13vw,96px)}
  .dek{font-size:12px}
  .feature-cols{columns:1}
  .quote blockquote p{font-size:24px}
  .hours{grid-template-columns:7rem 1fr}
}


/* the address is lowercase, wherever it sits */
.email{text-transform:none}